/* ABC design tokens — see docs/06-design-system.md */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations"), url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Palette */
  --obsidian: #101419;
  --obsidian-2: #161b21;
  --obsidian-3: #1c2229;
  --graphite: #343b42;
  --graphite-2: #4a525a;
  --silver: #b8c0c7;
  --silver-dim: #8a939b;
  --white: #f5f4f0;
  --paper-2: #ebe9e3;
  --alpenglow: #e7a86a;
  --alpenglow-hi: #f3c896;
  --alpenglow-ink: #9a5524;
  --danger: #e2735f;
  --danger-ink: #a83a28;
  --ok: #8fc4a2;

  /* Semantic (dark stage is the default surface) */
  --bg: var(--obsidian);
  --bg-raised: var(--obsidian-2);
  --fg: var(--white);
  --fg-muted: var(--silver);
  --fg-faint: var(--silver-dim);
  --rule: rgb(184 192 199 / .16);
  --rule-strong: rgb(184 192 199 / .32);
  --accent: var(--alpenglow);
  --accent-fg: var(--obsidian);
  --focus: var(--alpenglow);

  /* The character line */
  --line: linear-gradient(90deg, transparent 0%, var(--alpenglow) 18%, var(--alpenglow-hi) 50%, var(--alpenglow) 82%, transparent 100%);
  --line-v: linear-gradient(180deg, transparent 0%, var(--alpenglow) 18%, var(--alpenglow-hi) 50%, var(--alpenglow) 82%, transparent 100%);
  --line-glow: 0 0 12px rgb(231 168 106 / .55), 0 0 32px rgb(231 168 106 / .25);

  /* Type */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-display: clamp(2.5rem, 1.2rem + 5.4vw, 6.25rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3.2vw, 4.25rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 2vw, 2.9rem);
  --fs-h3: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  --fs-lead: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --track-display: .02em;
  --track-label: .16em;

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;
  --radius: 2px;
  --radius-lg: 6px;
  --header-h: 72px;

  /* Motion */
  --dur-feedback: 120ms;
  --dur-ui: 240ms;
  --dur-section: 480ms;
  --dur-cine: 900ms;
  --dur-reveal: 1600ms;
  --ease-precise: cubic-bezier(.2, 0, 0, 1);
  --ease-glide: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  color-scheme: dark;
}

/* Graphite surface: reading-heavy sections (specs, forms, process).
   A lifted dark tone rather than white, so moving between sections never flashes the eyes. */
.surface-paper {
  --bg: #1a2027;
  --bg-raised: #212830;
  --fg: var(--white);
  --fg-muted: #c3c9cf;
  --fg-faint: #9aa3ab;
  --rule: rgb(184 192 199 / .14);
  --rule-strong: rgb(184 192 199 / .3);
  --accent: var(--alpenglow);
  --accent-fg: var(--obsidian);
  --focus: var(--alpenglow);
  background: var(--bg);
  color: var(--fg);
  border-block: 1px solid rgb(184 192 199 / .08);
}

/* Reduced / essential tier: motion collapses to opacity, durations near-zero */
[data-tier="essential"] {
  --dur-section: 1ms;
  --dur-cine: 1ms;
  --dur-reveal: 1ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-section: 1ms; --dur-cine: 1ms; --dur-reveal: 1ms; }
}