/* ============================================================================
   TOKENS — every colour and size the site uses, in one place.
   Change a value here and it propagates everywhere.

   Theming rule of thumb:
     no data-theme attribute  → follow the operating system
     data-theme="light"       → force light
     data-theme="dark"        → force dark
   The dark palette is written twice (media query + attribute selector).
   Keep the two copies in sync.
   ========================================================================= */

:root {
  /* ---- Light palette (the default) ------------------------------------ */
  --bg: #ffffff;
  --bg-alt: #f6f5f3;
  --card-bg: #ffffff;
  --fg: #141311;
  --fg-body: #33322f;
  --fg-muted: #65635e;
  --fg-faint: #a19e98;
  --border: rgba(0, 0, 0, 0.12);
  --shadow-soft: rgba(0, 0, 0, 0.07);
  --bulb-glow: rgba(214, 168, 61, 0.55);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Lora", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* ---- Layout metrics -------------------------------------------------
     Referenced by layout.css to keep the snap maths consistent. */
  --appbar-h: 66px;
  --rail-h: 44px;
  --content-max: 1080px;
  /* The page margin, and the anchor every piece of text lines up on: the app
     bar, the hero and every section title all start here. */
  --gutter: clamp(20px, 4vw, 56px);

  /* ---- Cards ----------------------------------------------------------- */
  --card-w: 280px;
  --card-gap: 18px;
}

/* Dark palette — copy A: follows the OS unless light was explicitly chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0c;
    --bg-alt: #171716;
    --card-bg: #161615;
    --fg: #f2f1ee;
    --fg-body: #dedcd8;
    --fg-muted: #a8a6a1;
    --fg-faint: #6f6d68;
    --border: rgba(255, 255, 255, 0.14);
    --shadow-soft: rgba(0, 0, 0, 0.5);
  }
}

/* Dark palette — copy B: the user pressed the lightbulb. */
:root[data-theme="dark"] {
  --bg: #0d0d0c;
  --bg-alt: #171716;
  --card-bg: #161615;
  --fg: #f2f1ee;
  --fg-body: #dedcd8;
  --fg-muted: #a8a6a1;
  --fg-faint: #6f6d68;
  --border: rgba(255, 255, 255, 0.14);
  --shadow-soft: rgba(0, 0, 0, 0.5);
}