/* =========================================================================
   Design tokens — the single source of truth for the whole site.
   Change a value here and every page follows.
   ========================================================================= */
:root {
  color-scheme: dark;

  /* ---- Color: foundation ---- */
  --bg: #0a0a0a;
  --surface: #111111;
  --surface-2: #181818;
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.9);

  /* ---- Color: text (contrast on --bg) ---- */
  --text: #fafafa;     /* 19.0:1 */
  --text-2: #a8a8a8;   /*  8.3:1  body copy, descriptions */
  --text-3: #8a8a8a;   /*  5.7:1  metadata, labels — AA at small sizes */

  /* ---- Color: pastel accents (from the ink palette) ----
     Rule: one pastel per project or concept, used for small marks only
     (dots, chips, underlines, focus). Never large fills, never body text on pastel
     except dark text (#0a0a0a on any pastel is ≥ 13:1). */
  --pink:   #FFCBE1;
  --sage:   #D6E5BD;
  --butter: #F9E1A8;
  --sky:    #BCD8EC;
  --lilac:  #DCCCEC;
  --peach:  #FFDAB4;
  --accent: var(--lilac);  /* overridden per project/section */

  /* ---- Color: states ---- */
  --focus: var(--butter);
  --hover-tint: rgb(255 255 255 / 0.06);

  /* ---- Typography: families ---- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-accent: "Instrument Serif", Georgia, serif; /* italic, max once per section */

  /* ---- Typography: scale (5 text sizes + display) ---- */
  --fs-mono: 0.75rem;                                   /* 12  labels, metadata */
  --fs-small: 0.875rem;                                 /* 14  captions, tags */
  --fs-body: 1.0625rem;                                 /* 17  body */
  --fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);  /* 18–22 intros */
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);     /* 24–30 card titles */
  --fs-h2: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);     /* 36–68 section titles */
  --fs-display: clamp(3rem, 1rem + 8vw, 8.5rem);        /* 48–136 hero */

  /* ---- Typography: line height ---- */
  --lh-display: 0.92;
  --lh-heading: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* ---- Typography: letter spacing ---- */
  --ls-display: -0.045em;
  --ls-h2: -0.032em;
  --ls-h3: -0.015em;
  --ls-label: 0.12em;  /* uppercase mono labels only */

  /* ---- Spacing (4px base) ---- */
  --s-1: 0.25rem;  /*   4 */
  --s-2: 0.5rem;   /*   8 */
  --s-3: 0.75rem;  /*  12 */
  --s-4: 1rem;     /*  16 */
  --s-5: 1.5rem;   /*  24 */
  --s-6: 2rem;     /*  32 */
  --s-7: 3rem;     /*  48 */
  --s-8: 4rem;     /*  64 */
  --s-9: 6rem;     /*  96 */
  --s-10: 8rem;    /* 128 */
  --section-y: clamp(5rem, 3rem + 6vw, 8rem); /* 80–128 between sections */

  /* ---- Grid ---- */
  --container: 82.5rem;                     /* 1320 */
  --gutter: 1.5rem;                         /* 24 */
  --margin: clamp(1rem, 0.4rem + 3vw, 3rem); /* 16–48 page edge */
  --measure: 66ch;                          /* max line length for reading */

  /* ---- Shape ---- */
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-pill: 999px;
  --border: 1px solid var(--line);

  /* ---- Elevation: dark UI uses borders, not shadows. One shadow for popovers. ---- */
  --shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.7);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;   /* hover, press */
  --dur-base: 250ms;   /* fades, small reveals */
  --dur-slow: 700ms;   /* layout changes (accordion) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }