/* ============================================================
   OOPS ALL SOUPS — DESIGN TOKENS
   ------------------------------------------------------------
   This is the single source of truth for color and type.
   Every page links this file; nothing else defines a color.

   To restyle the site, change a value here. Do not add colors
   to any other stylesheet — a literal hex elsewhere only works
   in one theme and will break the other.

   Token names describe role, never appearance, so the palette
   can change without renaming anything.

   Three blocks below define the same tokens for the three
   states a visitor can be in:
     1. :root                          → light (the base)
     2. prefers-color-scheme: dark     → dark by OS preference
     3. [data-theme="dark"]            → dark by explicit choice

   Keep all three in sync. A token defined in only one of them
   will be undefined for some visitors, and text will render
   with no color.
   ============================================================ */

:root {
  /* ---- Surface ------------------------------------------- */
  /* Page background. Cool porcelain — a grey-green off-white,
     deliberately not a warm cream. */
  --ground:     #E7E9E2;

  /* ---- Content ------------------------------------------- */
  /* Primary. Body copy and display type. Enamel blue-black: a
     near-black biased toward the blue-green of the palette
     rather than a flat neutral. */
  --ink:        #14252F;

  /* Secondary. Supporting prose that should sit back from the
     primary text without receding out of comfortable reading. */
  --ink-soft:   #4C6069;

  /* Tertiary. Labels, eyebrows, metadata, small print.
     The light ground can't carry three clearly separated ink
     levels and still keep all of them readable, so this sits
     close to --ink-soft. The tier is marked mainly by
     typography — size, uppercase, letter-spacing — with the
     color as a nudge. Don't lighten it to widen the gap; that
     trades readability for a distinction type already makes. */
  --ink-faint:  #58696F;

  /* ---- Accent -------------------------------------------- */
  /* The accent, for display type: the wordmark and large
     headings. Clears 3:1 against --ground, which is the bar at
     that size, but NOT the 4.5:1 needed for body text. Yellows
     carry more luminance than any other hue, so on a light
     ground an accent this bright has no more headroom — which
     is why the text-safe variant below exists rather than one
     value trying to do both jobs. */
  --accent:     #A8760C;

  /* The same accent, dark enough to use as text at any size
     (4.5:1+). Reads as bronze rather than gold; that is the
     cost of legibility on a light ground. Use this anywhere
     the accent appears at body size — links, inline emphasis,
     small labels. */
  --accent-ink: #885D07;

  /* ---- Type ---------------------------------------------- */
  /* Display. The wordmark and headings. Loaded from Google
     Fonts in each page's <head>. */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* Body. Everything else. */
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
}

/* Dark, by operating-system preference.
   Guarded so an explicit light choice still wins over a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #101C23;
    --ink:        #E7E9E2;
    --ink-soft:   #9DADB2;
    --ink-faint:  #768990;

    /* Brighter than the light-mode accent. On the deep ground
       it has contrast to spare, so it can afford the saturation
       the light theme can't. */
    --accent:     #E0A93A;

    /* Deliberately identical to --accent here. On this ground
       the display accent already clears 4.5:1, so no separate
       text value is needed — the constraint that splits these
       two apart in light mode simply doesn't bind in dark.
       If --accent above ever changes, re-check this one. */
    --accent-ink: #E0A93A;
  }
}

/* Dark, by explicit choice — set data-theme="dark" on <html>.
   Kept in sync with the block above so that a theme toggle
   needs no change to this file. */
:root[data-theme="dark"] {
  --ground:     #101C23;
  --ink:        #E7E9E2;
  --ink-soft:   #9DADB2;
  --ink-faint:  #768990;
  --accent:     #E0A93A;
  --accent-ink: #E0A93A;
}