/* ==========================================================================
   Design tokens — "quiet technical"
   Colour, type, spacing, and shape primitives. Nothing here renders anything.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Colour: light ------------------------------------------------- */
  --bg:             #FAFAF9;
  --bg-inset:       #F4F4F2;
  --surface:        #FFFFFF;
  --ink:            #18181B;
  --ink-muted:      #52525B;
  --ink-subtle:     #71717A;
  --border:         #E4E4E7;
  --border-strong:  #D4D4D8;
  --accent:         #15568C;
  --accent-hover:   #0F3F68;
  --accent-wash:    #EEF3F8;
  --status-active:  #2F7D4F;

  /* Figures are light-background PNGs; this keeps them on white in both
     themes so plots are never rendered against a dark page. */
  --figure-bg:      #FFFFFF;

  /* --- Type ---------------------------------------------------------- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  1.0625rem;
  --fs-lg:    1.1875rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   clamp(1.75rem, 3vw, 2.125rem);
  --fs-3xl:   clamp(2.125rem, 4vw, 2.75rem);
  --fs-4xl:   clamp(2.5rem, 6vw, 3.75rem);

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --measure:  68ch;

  /* --- Spacing (8px base) -------------------------------------------- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  --section-y: var(--sp-24);

  /* --- Shape --------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;

  --container: 1120px;
  --nav-h: 60px;

  /* --- Motion -------------------------------------------------------- */
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #0F0F11;
  --bg-inset:       #141417;
  --surface:        #17171A;
  --ink:            #E8E8EA;
  --ink-muted:      #A1A1AA;
  --ink-subtle:     #8B8B93;
  --border:         #27272A;
  --border-strong:  #3F3F46;
  --accent:         #7FB2DE;
  --accent-hover:   #A5CBEA;
  --accent-wash:    #14202B;
  --status-active:  #6FBF8F;

  --figure-bg:      #FFFFFF;
}

@media (max-width: 640px) {
  :root {
    --section-y: var(--sp-16);
  }
}