/* =============================================================================
   The one place the page background is set.

   Every page loads this file before its own stylesheet. css/styles.css (the app
   and all the static pages) and css/landing.css (the landing page, which is
   deliberately self-contained) both read from here, so the background lives in
   a single declaration rather than one per stylesheet.

   Two spellings of the same colour, because there are two kinds of consumer:

     --st-bg-rgb   space-separated channels, for Tailwind's `rgb(var(--x) / a)`
                   utilities — this is what --c-ink is built from
     --st-bg       a ready-made colour, for plain `background: var(--st-bg)`

   Light theme only. Dark mode keeps its own dark surface, set in styles.css —
   a cream page in dark mode would defeat the point of dark mode.
============================================================================= */

:root {
  --st-bg-rgb: 245 241 234;   /* #F5F1EA — the cream the new sections use */
  --st-bg: rgb(var(--st-bg-rgb));

  /* Cards and boxes that sit ON the background. Deliberately NOT cream: they
     have to separate from it. Off-white rather than pure white so they match
     the cards in the designed sections. */
  --st-surface-rgb: 255 253 249;  /* #FFFDF9 */
  --st-surface: rgb(var(--st-surface-rgb));

  /* Text and borders, so the designed sections can stop hard-coding them and
     flip with everything else. Light values are the ones they shipped with. */
  --st-ink: #1F2A44;      /* headings */
  --st-ink-dim: #4A443D;  /* body copy */
  --st-accent: #A3461F;   /* eyebrows, "Avoid" labels */
  --st-cool: #1F2A44;     /* icons, "Right color" label — the site's --c-navy */
  --st-border: #E6DED1;

  /* The icon circle behind the small line icons in the "Before you start"
     checklist. It was hard-coded inside .st-check, which is why it stayed
     cream in dark mode while the icon stroke flipped to bone — a light glyph
     on a light disc, i.e. invisible. It belongs here with everything else that
     has to flip. */
  --st-chip: #F1EBE1;
  /* Channels only, for the pulse ring that animates out of that circle. */
  --st-ring-rgb: 31 42 68;   /* the site's navy */
}

/* ---------------------------------------------------------------------------
   Dark mode. Same switch the whole site already uses — [data-theme='dark'] on
   <html>, set before first paint by the inline script on every page. No second
   mechanism, no media query.

   Every value below is lifted from the site's existing dark palette in
   css/styles.css; nothing here is a new colour.
--------------------------------------------------------------------------- */
[data-theme='dark'] {
  --st-bg-rgb: 21 20 26;          /* --c-ink   #15141A */
  --st-surface-rgb: 31 29 36;     /* --c-ink2  #1F1D24 */
  --st-ink: rgb(241 238 233);     /* --c-bone  */
  --st-ink-dim: rgb(156 151 143); /* --c-muted */
  --st-accent: rgb(214 134 101);  /* --c-rust, already lifted for dark */
  --st-cool: rgb(138 173 224);    /* --c-navy, already lifted for dark */
  --st-border: rgb(50 47 56);     /* --c-ink3  */
  --st-chip: rgb(50 47 56);       /* --c-ink3, the site's raised dark surface */
  --st-ring-rgb: 241 238 233;     /* --c-bone  */
}