/* Base & typography */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.we-app {
  margin: 0;
  font-family: var(--we-font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--we-text);
  background: var(--we-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.we-app ::selection {
  background: var(--we-primary-muted);
  color: var(--we-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--we-text);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.we-mono {
  font-family: var(--we-font-mono);
  font-size: 0.85em;
}

.we-text-muted {
  color: var(--we-text-muted) !important;
}

.we-text-secondary {
  color: var(--we-text-secondary) !important;
}

/* Scrollbar */
.we-app ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.we-app ::-webkit-scrollbar-track {
  background: transparent;
}

.we-app ::-webkit-scrollbar-thumb {
  background: var(--we-scrollbar);
  border-radius: 3px;
}

.we-app ::-webkit-scrollbar-thumb:hover {
  background: var(--we-scrollbar-hover);
}

/* Mesh background */
.we-mesh-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--we-gradient-mesh);
}

.we-mesh-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}

[data-we-theme="light"] .we-mesh-bg::after {
  opacity: 0.5;
}

/* Page structure */
.we-page-header {
  margin-bottom: var(--we-space-8);
}

.we-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--we-space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--we-accent);
  margin-bottom: var(--we-space-2);
}

.we-page-title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.2;
}

.we-page-subtitle {
  margin: var(--we-space-2) 0 0;
  color: var(--we-text-muted);
  font-size: 0.9rem;
  max-width: 40rem;
}

/* Section labels in sidebar */
.we-nav-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--we-text-muted);
  padding: var(--we-space-4) var(--we-space-4) var(--we-space-2);
  margin-top: var(--we-space-2);
}

.we-nav-label:first-child {
  margin-top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}