/* Oeste — Topanga theme. Single token source of truth.
   Values here MUST match src/tokens.json and DESIGN_TOKENS in src/index.js.
   Canonical palette (2026-10-14): accent = Warm Ochre #C47D3B (Pally-verified,
   more muted canyon ochre than the old #E08244). Canyon Rust is decorative
   only — never use it for small error text. Danger is the semantic error
   token, darkened to pass WCAG AA 4.5:1 for normal text on paper.
   Focus is ink/paper, deliberately distinct from danger. */

:root {
  color-scheme: light;
  --color-bg: #f6f4f1;
  --color-surface: #fcfaf7;
  --color-text: #1c1917;
  --color-muted: #706963;
  --color-border: rgba(28, 25, 23, 0.1);
  --color-accent: #c47d3b;
  --color-on-accent: #1c1917;
  --color-accent-alt: #5e6b5a;
  --color-rust: #b85b35;
  --color-danger: #a83e22;
  --color-success: #2f6b3a;
  --color-warning: #7a5a12;
  --color-focus: #1c1917;
  /* Code highlighting (docs site only). Light-mode keyword/number are
     darker derivatives of Warm Ochre / Canyon Rust: the decorative tokens
     fail 4.5:1 on surface (#C47D3B = 3.18:1, #B85B35 = 4.40:1), so code
     text uses darker same-hue shades that pass (see scripts/verify.mjs). */
  --code-keyword: #8a5420;
  --code-string: #5e6b5a;
  --code-number: #8f3b1e;
  --code-comment: #706963;
  --code-key: #1c1917;
  --code-punct: #706963;
  --font-body: 'Manrope', Arial, Helvetica, sans-serif;
  --font-display: var(--font-body);
  --font-mono: 'JetBrains Mono', Consolas, monospace;
  /* Display type — Millie's exact treatment, verified from her Pally build:
     Manrope 500, tracking -0.04em, leading 1.1. Headings (h2/h3) also 500,
     tracking -0.025em. Size steps: 40px on phones (so the hero heading stays
     exactly 2 lines), 48px at >=480px, 72px at >=720px. Body leading 1.55. */
  --type-display: 2.5rem;
  --type-title: clamp(1.75rem, 4vw, 2.5rem);
  --type-heading: clamp(1.25rem, 2.5vw, 1.5rem);
  --type-body: 1rem;
  --type-label: 0.875rem;
  --type-caption: 0.75rem;
  --type-mono: 0.75rem;
  --leading-display: 1.1;
  --font-weight-display: 500;
  --font-weight-heading: 500;
  --tracking-display: -0.04em;
  --tracking-heading: -0.025em;
  --leading-title: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.55;
  --leading-label: 1.5;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-dialog: 0 16px 64px rgba(28, 25, 23, 0.16);
  --motion-in: 180ms;
  --motion-out: 140ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --container-narrow: 720px;
  --container-wide: 1160px;
  --touch-min: 44px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #121110;
  --color-surface: #1c1917;
  --color-text: #f5f3ef;
  --color-muted: #9e968f;
  --color-border: rgba(245, 243, 239, 0.1);
  --color-accent: #db914e;
  --color-on-accent: #1c1917;
  --color-accent-alt: #8b9b87;
  --color-rust: #d98a63;
  --color-danger: #e07a52;
  --color-success: #6ba368;
  --color-warning: #d9a441;
  --color-focus: #f5f3ef;
  /* Code highlighting (docs site only). Dark-mode decorative tokens already
     pass on surface, so code colors match them directly. */
  --code-keyword: #db914e;
  --code-string: #8b9b87;
  --code-number: #d98a63;
  --code-comment: #9e968f;
  --code-key: #f5f3ef;
  --code-punct: #9e968f;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-dialog: 0 16px 64px rgba(0, 0, 0, 0.5);
}

/* Display size steps — Millie's scale: 40px phones, 48px >=480px, 72px >=720px.
   The 40px phone step is what keeps the hero heading at exactly 2 lines. */
@media (min-width: 480px) {
  :root { --type-display: 3rem; }
}
@media (min-width: 720px) {
  :root { --type-display: 4.5rem; }
}

* { box-sizing: border-box; }

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