/* ==========================================================================
   TOKENS — the single source of truth for the site's visual language.
   Change a value here and it propagates everywhere. Nothing else defines
   a raw colour, font, or spacing value.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Typeface stacks ------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Fluid type scale (min viewport 380px → max 1280px) -------------- */
  --step--2: clamp(0.72rem, 0.700rem + 0.09vw, 0.775rem);
  --step--1: clamp(0.84rem, 0.808rem + 0.14vw, 0.925rem);
  --step-0:  clamp(1.00rem, 0.962rem + 0.17vw, 1.100rem);
  --step-1:  clamp(1.20rem, 1.130rem + 0.31vw, 1.390rem);
  --step-2:  clamp(1.44rem, 1.320rem + 0.53vw, 1.760rem);
  --step-3:  clamp(1.73rem, 1.530rem + 0.88vw, 2.260rem);
  --step-4:  clamp(2.07rem, 1.760rem + 1.39vw, 2.900rem);
  --step-5:  clamp(2.49rem, 2.000rem + 2.17vw, 3.800rem);
  --step-6:  clamp(2.99rem, 2.240rem + 3.33vw, 5.000rem);

  /* --- Spacing scale --------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* --- Measure & container widths -------------------------------------- */
  /* One centred column, Notion-style. Everything on the page aligns to it. */
  --width-content: 48rem;   /* the page column  */
  --width-prose:   40rem;   /* tighter reading measure inside it */
  --gutter: clamp(1.5rem, 6vw, 3rem);

  /* --- Colour: light — MILK WHITE ------------------------------------- */
  --bg:           #FCFAF5;   /* milk white */
  --bg-tint:      #F5F1E8;
  --surface:      #FFFFFF;
  --text:         #1B1E24;
  --text-muted:   #565D6B;
  --text-faint:   #8A909D;
  --rule:         #E8E3D8;
  --rule-strong:  #D2CCBE;
  --accent:       #1C3D6E;   /* deep blue */
  --accent-hover: #2A5391;
  --accent-soft:  #E9EDF4;
  --highlight:    #A8501F;   /* warm secondary, used sparingly */
  --selection:    #DCE4F0;

  --shadow-sm: 0 1px 2px rgba(27, 30, 36, 0.05);
  --shadow-md: 0 1px 2px rgba(27, 30, 36, 0.05), 0 10px 30px -16px rgba(27, 30, 36, 0.25);

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
}

/* --- Colour: dark ------------------------------------------------------ */
/* Applied when the OS asks for dark AND the reader has not forced light.  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:           #0E1828;   /* dark blue */
    --bg-tint:      #131F33;
    --surface:      #162237;
    --text:         #E9EEF6;
    --text-muted:   #A6B3C6;
    --text-faint:   #78859A;
    --rule:         #23324A;
    --rule-strong:  #3A4C68;
    --accent:       #8FB6E8;
    --accent-hover: #B6D2F7;
    --accent-soft:  #1B2C46;
    --highlight:    #E0A070;
    --selection:    #22406B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 30px -16px rgba(0, 0, 0, 0.75);
  }
}

/* The toggle wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #0E1828;   /* dark blue */
  --bg-tint:      #131F33;
  --surface:      #162237;
  --text:         #E9EEF6;
  --text-muted:   #A6B3C6;
  --text-faint:   #78859A;
  --rule:         #23324A;
  --rule-strong:  #3A4C68;
  --accent:       #8FB6E8;
  --accent-hover: #B6D2F7;
  --accent-soft:  #1B2C46;
  --highlight:    #E0A070;
  --selection:    #22406B;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 30px -16px rgba(0, 0, 0, 0.75);
}