/* ============================================================
   TOKENS
   The responsive system. Every scale is declared once per
   breakpoint as a *raw* token, then a media query rebinds the
   *semantic* token to the right one. Components only ever read
   semantic tokens, so nothing downstream knows breakpoints exist
   and the whole page steps in unison instead of drifting.

   Only four type sizes and six spacing steps — a page this quiet
   doesn't need more, and a short scale is what keeps it looking
   deliberate.
   ============================================================ */

:root {
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --bp-desktop-large: 1360px;
}

/* ---------- color ---------- */
:root {
  --black: #000;
  --white: #fff;
  --grey-100: #f6f6f6;
  --grey-300: #ddd;
  --grey-500: #999;
  --grey-600: #666;
  --grey-700: #333;
  --grey-800: #161616;
  --blue: #0a82e1;

  --bg: var(--white);
  --fg: var(--black);
  --fg-muted: var(--grey-600);
  --fg-faint: var(--grey-500);
  --rule: var(--grey-300);
  --surface: var(--grey-100);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--black);
    --fg: var(--white);
    --fg-muted: var(--grey-500);
    --fg-faint: var(--grey-600);
    --rule: var(--grey-700);
    --surface: var(--grey-800);
  }
}

/* ---------- raw type scale, per breakpoint ---------- */
:root {
  /* Labels are set in the serif now, and uppercase serif reads
     smaller than uppercase mono at the same size — hence 12px
     rather than the 10px a mono label would take. */
  --fs-x-small-mobile: 12px;
  --fs-small-mobile: 13px;
  --fs-body-mobile: 15px;
  --fs-body-large-mobile: 17px;

  --fs-x-small-tablet: 12px;
  --fs-small-tablet: 13px;
  --fs-body-tablet: 15px;
  --fs-body-large-tablet: 18px;

  --fs-x-small-desktop: 12px;
  --fs-small-desktop: 14px;
  --fs-body-desktop: 16px;
  --fs-body-large-desktop: 19px;
}

/* ---------- raw spacing scale, per breakpoint ---------- */
:root {
  --sp-1-mobile: 4px;
  --sp-2-mobile: 8px;
  --sp-3-mobile: 16px;
  --sp-5-mobile: 32px;
  --sp-6-mobile: 48px;
  --sp-7-mobile: 56px;

  --sp-1-tablet: 6px;
  --sp-2-tablet: 12px;
  --sp-3-tablet: 16px;
  --sp-5-tablet: 40px;
  --sp-6-tablet: 64px;
  --sp-7-tablet: 88px;

  --sp-1-desktop: 8px;
  --sp-2-desktop: 16px;
  --sp-3-desktop: 24px;
  --sp-5-desktop: 48px;
  --sp-6-desktop: 80px;
  --sp-7-desktop: 128px;
}

/* ---------- raw grid config, per breakpoint ---------- */
:root {
  --cols-mobile: 6;
  --cols-tablet: 8;
  --cols-desktop: 12;

  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 24px;
  --gutter-desktop-large: 36px;

  --margin-mobile: 20px;
  --margin-tablet: 32px;
  --margin-desktop: 40px;
  --margin-desktop-large: 48px;

  --max-width: 1200px;
}

/* ============================================================
   SEMANTIC BINDING — mobile first
   ============================================================ */
:root {
  --fs-x-small: var(--fs-x-small-mobile);
  --fs-small: var(--fs-small-mobile);
  --fs-body: var(--fs-body-mobile);
  --fs-body-large: var(--fs-body-large-mobile);

  --sp-1: var(--sp-1-mobile);
  --sp-2: var(--sp-2-mobile);
  --sp-3: var(--sp-3-mobile);
  --sp-5: var(--sp-5-mobile);
  --sp-6: var(--sp-6-mobile);
  --sp-7: var(--sp-7-mobile);

  --grid-columns: var(--cols-mobile);
  --grid-gutter: var(--gutter-mobile);
  --grid-margin: var(--margin-mobile);
}

@media (min-width: 600px) {
  :root {
    --fs-x-small: var(--fs-x-small-tablet);
    --fs-small: var(--fs-small-tablet);
    --fs-body: var(--fs-body-tablet);
    --fs-body-large: var(--fs-body-large-tablet);

    --sp-1: var(--sp-1-tablet);
    --sp-2: var(--sp-2-tablet);
    --sp-3: var(--sp-3-tablet);
    --sp-5: var(--sp-5-tablet);
    --sp-6: var(--sp-6-tablet);
    --sp-7: var(--sp-7-tablet);

    --grid-columns: var(--cols-tablet);
    --grid-gutter: var(--gutter-tablet);
    --grid-margin: var(--margin-tablet);
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-x-small: var(--fs-x-small-desktop);
    --fs-small: var(--fs-small-desktop);
    --fs-body: var(--fs-body-desktop);
    --fs-body-large: var(--fs-body-large-desktop);

    --sp-1: var(--sp-1-desktop);
    --sp-2: var(--sp-2-desktop);
    --sp-3: var(--sp-3-desktop);
    --sp-5: var(--sp-5-desktop);
    --sp-6: var(--sp-6-desktop);
    --sp-7: var(--sp-7-desktop);

    --grid-columns: var(--cols-desktop);
    --grid-gutter: var(--gutter-desktop);
    --grid-margin: var(--margin-desktop);
  }
}

@media (min-width: 1360px) {
  :root {
    --grid-gutter: var(--gutter-desktop-large);
    --grid-margin: var(--margin-desktop-large);
  }
}

/* ---------- motion ----------
   One curve, two durations. On a static page the only thing that
   moves is a link under the cursor.
   Durations are written in ms, not s, so tooling that parses the
   number gets 150 rather than 0.15. */
:root {
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --stroke: 1px;
  --corner-small: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
  }
}

/* ---------- font ----------
   One family for the whole page. Hierarchy comes from size, case
   and letter-spacing instead of from a second typeface. */
:root {
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype",
    "Times New Roman", serif;

  /* Newsreader carries no Greek, so the symbols would fall back to
     whatever the browser picked — different metrics on every device.
     Naming the fallback stack makes that choice deliberate: Palatino
     and Times on macOS and Windows, Noto and Liberation elsewhere,
     all of which have real Greek glyphs cut to match their serifs. */
  --font-greek: "Palatino Linotype", "Book Antiqua", Palatino,
    "Times New Roman", "Noto Serif", "Liberation Serif", serif;

  /* The one exception to the single family: code has to be monospaced
     to be readable, and it only appears inside articles. System stack
     — no second webfont to load for something this rare. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}