/* retro · tokens — the start of retro's design system.
   Primitives first, then semantic names. Components use the semantic layer only. */
:root {
  /* primitives */
  --char-950: #0d0c0b;
  --char-900: #151412;
  --char-850: #1c1a17;
  --char-700: #2c2925;
  --sand-50:  #f3efe8;
  --sand-300: #b8b1a6;
  --sand-500: #8a8378;   /* 5.0:1 on char-950 */
  --amber-400: #f7b443;
  --amber-500: #f5a524;
  --red-400:  #ff5a6e;   /* redlines: measurements in developer view */

  /* semantic */
  --bg: var(--char-950);
  --surface: var(--char-900);
  --surface-2: var(--char-850);
  --line: rgba(243, 239, 232, .09);
  --line-strong: rgba(243, 239, 232, .18);
  --ink: var(--sand-50);
  --ink-2: var(--sand-300);
  --ink-3: var(--sand-500);
  --accent: var(--amber-500);
  --accent-ink: #160f02;          /* text on accent */
  --measure: var(--red-400);
  --focus: var(--amber-400);

  /* type */
  --font-sans: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Frank Ruhl Libre", Georgia, serif;   /* upright emphasis (no Hebrew italic) */
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --t-name: clamp(4.5rem, 12.5vw, 11.5rem);
  --t-lead: clamp(1.375rem, 2.6vw, 2.375rem);
  --t-h2: clamp(1.75rem, 3.4vw, 3rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .75rem;

  /* space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 82.5rem;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-card: 28px;
  --r-pill: 999px;

  /* motion — critically damped feel; CSS transitions reverse from the live value */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 160ms;
  --d-med: 420ms;
  --d-slow: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-med: 200ms; --d-slow: 240ms; }
}