/* ============================================================
   _base.css — theme-invariant tokens
   Type, spacing, semantic colour, hairlines, focus.
   Section refs: baseline brief §1.4, §2.1, §3.1
   ============================================================ */

:root {
  /* ---------- Type ---------- */
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* phone defaults */
  --fs-h1:         28px;
  --fs-h2:         22px;
  --fs-h3:         17px;
  --fs-body:       16px;
  --fs-body-lead:  17px;
  --fs-body-small: 14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* ---------- Spacing (8px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ---------- Brand (constant across themes) ---------- */
  --brand:        #2EC4B6;
  --brand-strong: #26A89C;
  --brand-tint:   rgba(46, 196, 182, 0.10);

  /* ---------- Semantic states ---------- */
  --success: #3D9D6B;
  --warning: #C97A3D;
  --danger:  #C2374B;
  --info:    #3D7A9D;

  --success-tint: rgba(61, 157, 107, 0.08);
  --warning-tint: rgba(201, 122, 61, 0.08);
  --danger-tint:  rgba(194, 55, 75, 0.06);
  --info-tint:    rgba(61, 122, 157, 0.08);

  /* ---------- Hairlines ---------- */
  --hairline:        rgba(26, 31, 42, 0.10);
  --hairline-strong: rgba(26, 31, 42, 0.18);

  /* ---------- Focus ring ---------- */
  --focus-ring: rgba(46, 196, 182, 0.40);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-tap:  80ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;

  /* ---------- Layout ---------- */
  --container-tablet:  720px;
  --container-desktop: 960px;
  --header-h-phone: 56px;
  --header-h-wide:  64px;
  --bottom-nav-h:   64px;
  --rail-w:    64px;
  --sidebar-w: 280px;
}

/* ---------- Type scale: tablet ---------- */
@media (min-width: 600px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 18px;
    --fs-body-lead: 18px;
  }
}

/* ---------- Type scale: desktop ---------- */
@media (min-width: 1280px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 26px;
    --fs-eyebrow: 12px;
  }
}

/* ---------- Increased contrast ---------- */
@media (prefers-contrast: more) {
  :root {
    --hairline:        rgba(26, 31, 42, 0.22);
    --hairline-strong: rgba(26, 31, 42, 0.34);
  }
}

/* ============================================================
   Base reset + typography rules
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg-base);
  font-feature-settings: 'tnum', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Numbers must be tabular everywhere (mono captions, body, etc.) */
[data-tnum], .mono, .caption, .eyebrow, time, output, .num {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2;          letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

.body-lead {
  font-size: var(--fs-body-lead);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.body-small { font-size: var(--fs-body-small); line-height: 1.5; }

.caption,
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink-muted);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brand-strong);
}

.italic-beat {
  font-style: italic;
  color: var(--ink-muted);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-elevated);
  color: var(--ink);
  padding: 8px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  z-index: 9999;
}
.skip-link:focus { left: 8px; top: 8px; outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Focus rings (mandatory) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-md);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
}

::selection { background: var(--brand-tint); color: var(--ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}