/* Design tokens.
   :root only — no other selector belongs in this file, ever.
   If a value isn't declared here, it shouldn't appear in the CSS. */

/* Layer order is declared once, here, because this file loads first.
   Later layers win regardless of specificity — no specificity wars, no !important. */
@layer tokens, base, layout, components;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Light palette. Every pair clears its WCAG threshold — see the @supports
       block below for the dark values and the note on how they are applied. */
    --base: #fbf7ef; /* warm paper  */
    --ink: #2b2b2b; /* body text   */
    --muted: #5c5852; /* dates, tags */
    --accent: #a63d2f; /* terracotta — links, focus ring */
    --rule: #8f876e; /* borders     */

    /* Type — pick by job, not by number */
    /* Each is a range: the low value is what a 320px screen gets, the high
       value is reached around 1000px and never exceeded.

       The growth is deliberately small. Prose is capped at --measure, so a wide
       screen does not lengthen a line — it only widens the margins. Type that
       kept growing past that point would just take up more room to say the same
       thing at the same character count. */
    --text-meta: clamp(0.8125rem, 0.7946rem + 0.0893vw, 0.875rem); /* 13 → 14px */
    --text-body: clamp(1rem, 0.9821rem + 0.0893vw, 1.0625rem); /* 16 → 17px */
    --text-section: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem); /* 20 → 22px */
    --text-title: clamp(1.56rem, 1.47rem + 0.45vw, 1.75rem); /* 25 → 28px */
    /* Fixed on purpose: the name is a logo, and a logo that resizes with the
       window reads as jarring. 20px sits one step below --text-title, so the
       wordmark never competes with the page's own h1. */
    --text-brand: 1.25rem; /* 20px, wordmark only */

    --font-body: "Roboto Serif", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Space — 8px grid. Base is one line of body text (16 × 1.6 = 24px). */
    --space-2xs: 0.25rem; /*  4px */
    --space-xs: 0.5rem; /*  8px */
    --space-s: 1rem; /* 16px */
    --space-m: 1.5rem; /* 24px ← default when unsure */
    --space-l: 2.5rem; /* 40px */
    --space-xl: 4rem; /* 64px */
    --space-2xl: 6rem; /* 96px */

    /* Layout */
    --measure: 66ch; /* prose line length */
    --tap: 3rem; /* 48px — on the 8px grid, exceeds the 44px guideline */

    /* Motion */
    --motion-fast: 120ms; /* hover, focus, color */
    --motion-slow: 320ms; /* things that move or resize */
  }

  /* Dark mode */
  @supports (color: light-dark(#000, #fff)) {
    :root {
      --base: light-dark(#fbf7ef, #223129);
      --ink: light-dark(#2b2b2b, #ede8dc);
      --muted: light-dark(#5c5852, #aebfb3);
      --accent: light-dark(#a63d2f, #e8a87c);
      --rule: light-dark(#8f876e, #68836f);
    }
  }

  /* The manual override. Absent either attribute, color-scheme stays
     `light dark` and the OS preference decides. */
  :root[data-theme="light"] {
    color-scheme: light;
  }

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

  /* Every transition references a motion token, so this one block covers the
     whole site without per-component overrides. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion-fast: 0ms;
      --motion-slow: 0ms;
    }
  }
}