/* =====================================================================
   Nutrition Gnome - brand tokens
   Direction: apothecary garden almanac. Palette + serif come from the
   logo (the brief). Signature: stamp/seal motif + sprig dividers.

   This file is the portable "brand DNA": colors, type, shadows, radii.
   It has no component rules in it, so it can be dropped into a new
   project on its own. See components.css for the site's component
   library, which is built on top of these variables.

   ---------------------------------------------------------------------
   DARK THEME
   ---------------------------------------------------------------------
   Every color token gets a dark-mode counterpart below. This isn't a
   mechanical invert: lightness/saturation were re-tuned per swatch so
   the brand still reads as terracotta/forest/gold, and so text keeps
   WCAG AA contrast (4.5:1 body, 3:1 large text/UI) against whatever it
   sits on in each theme.

   Three color tokens are intentionally NOT symmetric with their obvious
   sibling because one CSS variable can't serve two contrast-incompatible
   jobs at once:
     - --terracotta is the "background-safe" shade: dark/saturated enough
       that white button text on top of it still hits 4.5:1. It's what
       .btn--primary / .nav-cta / .tier-ribbon / .cta-band use.
     - --terracotta-text is the "foreground-safe" shade: bright enough to
       read as body/label text against the page background. It's what
       .eyebrow / .seal / nav link hover / post-tag / etc. use. In light
       mode it equals the original --terracotta value (no visual change);
       in dark mode it's brightened so it still hits 4.5:1 against the
       near-black page background.
     - --cream-fixed-rgb is a constant (never redefined below). A few
       sections of the site (the philosophy "band", the footer) are
       *always* a dark forest surface with pale parchment-toned text,
       regardless of site theme - they don't invert, by design, the same
       way a printed almanac's ribbon marker doesn't change with the
       light. Components that live inside those fixed-dark bands use
       this constant instead of the theme-following --parchment-rgb.

   Cascade order matters: the media query supplies the OS-level default,
   then the attribute selectors (which have higher specificity) let a
   manual toggle win over the OS setting in either direction.
   ===================================================================== */

:root {
  --parchment: #F3ECDB;
  --parchment-2: #EDE3CC;
  --cream-card: #FBF6EA;
  --cream-card-2: #F1E7D2;
  --ink: #3A2C20;
  --ink-soft: #6E5B49;
  --ink-body: #463729;
  --terracotta: #BD4B33;
  --terracotta-dark: #9C3B27;
  --terracotta-text: #BD4B33;
  --forest: #55683E;
  --forest-deep: #2E3826;
  --gold: #C8993B;
  --gold-dark: #B9882F;
  --input-bg: #FFFFFF;
  --line: rgba(58, 44, 32, 0.16);
  --line-strong: rgba(58, 44, 32, 0.28);

  /* RGB channel tuples so decorative tints can theme via rgba(var(--x-rgb), a) */
  --ink-rgb: 58, 44, 32;
  --parchment-rgb: 243, 236, 219;
  --terracotta-rgb: 189, 75, 51;
  --terracotta-text-rgb: 189, 75, 51;
  --forest-rgb: 85, 104, 62;
  --gold-rgb: 200, 153, 59;

  /* Constant - see note above. Not redefined in the dark blocks. */
  --cream-fixed: #F3ECDB;
  --cream-fixed-rgb: 243, 236, 219;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --shadow-sm: 0 1px 2px rgba(58, 44, 32, 0.06), 0 2px 8px rgba(58, 44, 32, 0.06);
  --shadow-md: 0 6px 18px rgba(58, 44, 32, 0.10), 0 2px 6px rgba(58, 44, 32, 0.06);
  --shadow-lg: 0 18px 50px rgba(58, 44, 32, 0.16);

  --radius: 12px;
  --radius-lg: 20px;
  /* Caps the nav, footer, hero shell, and every card grid. Prose is capped
     separately and much narrower (.container--narrow at 760px, .faq-inner at
     800px, and per-block `ch` measures), so raising this widens the layout
     without pushing text past a readable line length. */
  --maxw: 1320px;

  color-scheme: light;
}

/* ---------- dark theme: OS-level default (no manual override saved) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --parchment: #211812;
    --parchment-2: #2A2018;
    --cream-card: #322619;
    --cream-card-2: #3B2C1C;
    --ink: #F1E6D3;
    --ink-soft: #C7B394;
    --ink-body: #D8C6A9;
    --terracotta: #B7472F;
    --terracotta-dark: #9C3B27;
    --terracotta-text: #E97256;
    --forest: #8FB06B;
    --forest-deep: #2E3826;
    --gold: #D9AE5C;
    --gold-dark: #E8C077;
    --input-bg: #241B12;
    --line: rgba(241, 230, 211, 0.16);
    --line-strong: rgba(241, 230, 211, 0.30);

    --ink-rgb: 241, 230, 211;
    --parchment-rgb: 33, 24, 18;
    --terracotta-rgb: 183, 71, 47;
    --terracotta-text-rgb: 233, 114, 86;
    --forest-rgb: 143, 176, 107;
    --gold-rgb: 217, 174, 92;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* ---------- dark theme: forced by the toggle (wins over OS setting) ---------- */
:root[data-theme="dark"] {
  --parchment: #211812;
  --parchment-2: #2A2018;
  --cream-card: #322619;
  --cream-card-2: #3B2C1C;
  --ink: #F1E6D3;
  --ink-soft: #C7B394;
  --ink-body: #D8C6A9;
  --terracotta: #B7472F;
  --terracotta-dark: #9C3B27;
  --terracotta-text: #E97256;
  --forest: #8FB06B;
  --forest-deep: #2E3826;
  --gold: #D9AE5C;
  --gold-dark: #E8C077;
  --input-bg: #241B12;
  --line: rgba(241, 230, 211, 0.16);
  --line-strong: rgba(241, 230, 211, 0.30);

  --ink-rgb: 241, 230, 211;
  --parchment-rgb: 33, 24, 18;
  --terracotta-rgb: 183, 71, 47;
  --terracotta-text-rgb: 233, 114, 86;
  --forest-rgb: 143, 176, 107;
  --gold-rgb: 217, 174, 92;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ---------- light theme: forced by the toggle (wins over OS "dark") ---------- */
:root[data-theme="light"] {
  --parchment: #F3ECDB;
  --parchment-2: #EDE3CC;
  --cream-card: #FBF6EA;
  --cream-card-2: #F1E7D2;
  --ink: #3A2C20;
  --ink-soft: #6E5B49;
  --ink-body: #463729;
  --terracotta: #BD4B33;
  --terracotta-dark: #9C3B27;
  --terracotta-text: #BD4B33;
  --forest: #55683E;
  --forest-deep: #2E3826;
  --gold: #C8993B;
  --gold-dark: #B9882F;
  --input-bg: #FFFFFF;
  --line: rgba(58, 44, 32, 0.16);
  --line-strong: rgba(58, 44, 32, 0.28);

  --ink-rgb: 58, 44, 32;
  --parchment-rgb: 243, 236, 219;
  --terracotta-rgb: 189, 75, 51;
  --terracotta-text-rgb: 189, 75, 51;
  --forest-rgb: 85, 104, 62;
  --gold-rgb: 200, 153, 59;

  --shadow-sm: 0 1px 2px rgba(58, 44, 32, 0.06), 0 2px 8px rgba(58, 44, 32, 0.06);
  --shadow-md: 0 6px 18px rgba(58, 44, 32, 0.10), 0 2px 6px rgba(58, 44, 32, 0.06);
  --shadow-lg: 0 18px 50px rgba(58, 44, 32, 0.16);

  color-scheme: light;
}