:root{
  /* Brand & accent */
  --primary:#FF5200;--primary-deep:#D73302;--on-primary:#ffffff;
  --sunshine-300:#ffce8c;--sunshine-500:#ffa23a;--sunshine-700:#ff8205;--sunshine-800:#e85b04;--sunshine-900:#C53800;
  --yellow-saturated:#ffd800;
  --block-5:#ffe08a;--block-6:#ffc53d;--block-7:#f0620f;

  /* Cream / warm neutral */
  --cream:#fff6e0;--cream-soft:#fffbef;--cream-deeper:#ffe9b8;--beige-deep:#efddb3;--footer-cream:#fff6e0;

  /* Surface */
  --canvas:#ffffff;--surface:#faf9f6;--surface-cream:#fff9e9;--surface-cream-soft:#fffbef;--surface-code:#14100d;
  --hairline:#e5e2dc;--hairline-soft:#eeebe5;--hairline-strong:#cfcac1;

  /* Text */
  --ink:#121212;--ink-tint:#1c1917;--charcoal:#2b2724;--slate:#55504a;--steel:#7a736b;--stone:#9c948a;--muted:#b8b0a6;
  --on-dark:#ffffff;--on-dark-muted:rgba(255,255,255,.64);--on-cream:#1a1613;

  /* Semantic */
  --link:#FF5200;--link-hover:#D73302;

  /* Signature gradients */
  --sunset-stripe:linear-gradient(90deg,var(--primary) 0%,var(--sunshine-700) 28%,var(--sunshine-500) 52%,var(--yellow-saturated) 76%,var(--cream) 100%);
  --sunset-sky:linear-gradient(135deg,var(--sunshine-700) 0%,var(--sunshine-900) 60%,var(--primary) 100%);

  /* Semantic aliases */
  --text-primary:var(--ink);--text-secondary:var(--slate);--text-tertiary:var(--steel);--text-muted:var(--muted);
  --surface-card:var(--canvas);--surface-panel:var(--cream);--border-default:var(--hairline-soft);--border-input:var(--hairline-strong);

  /* Fixed — deliberately does NOT flip with the theme. Two spots need a
     near-black value regardless of light/dark: the "dark" button variant
     (it should stay dark, not invert to a pale button) and text sitting on
     the CTA banner's fixed yellow/orange gradient (which also never
     inverts, so its text can't either). */
  --ink-fixed:#121212;
}

/* =====================================================================
   Dark mode — one value bank (--*-dark), applied by either of the two
   blocks below: system preference (prefers-color-scheme) when the visitor
   hasn't chosen explicitly, or the explicit [data-theme] choice made via
   the toggle in the nav (js/theme.js), which always wins over system.
   Accent colours (primary, sunshine/block family, the sunset gradients,
   on-dark, on-primary) are intentionally absent — they're vivid enough to
   read correctly on both a white and a near-black canvas, so they're
   never redefined; only surfaces, borders and text invert.
   ===================================================================== */
:root{
  --canvas-dark:#161310;--surface-dark:#1f1b17;--surface-cream-soft-dark:#241f1a;
  --cream-dark:#2a2115;--cream-deeper-dark:#3a2c16;--beige-deep-dark:#8a7248;--footer-cream-dark:#1c1712;
  --hairline-dark:#332c24;--hairline-soft-dark:#241f19;--hairline-strong-dark:#786547;
  --ink-dark:#f3ece0;--ink-tint-dark:#ede4d4;--charcoal-dark:#d8cdbb;--slate-dark:#b8ac98;
  --steel-dark:#948a79;--stone-dark:#79705f;--muted-dark:#544935;
  --on-cream-dark:#f0e6d2;--link-hover-dark:#ffa23a;
  /* One credential-card swatch reuses --beige-deep as a flat fill (not a
     border) with ink text over it; --beige-deep-dark is tuned for the 3:1
     border case elsewhere and falls short at 3.9:1 for that 13px text, so
     that one swatch gets its own token instead of straining beige-deep to
     serve both roles. Light mode is untouched (same value as beige-deep). */
  --cred-amber:var(--beige-deep);--cred-amber-dark:#786040;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:var(--canvas-dark);--surface:var(--surface-dark);--surface-cream-soft:var(--surface-cream-soft-dark);
    --cream:var(--cream-dark);--cream-deeper:var(--cream-deeper-dark);--beige-deep:var(--beige-deep-dark);--footer-cream:var(--footer-cream-dark);
    --hairline:var(--hairline-dark);--hairline-soft:var(--hairline-soft-dark);--hairline-strong:var(--hairline-strong-dark);
    --ink:var(--ink-dark);--ink-tint:var(--ink-tint-dark);--charcoal:var(--charcoal-dark);--slate:var(--slate-dark);
    --steel:var(--steel-dark);--stone:var(--stone-dark);--muted:var(--muted-dark);
    --on-cream:var(--on-cream-dark);--link-hover:var(--link-hover-dark);--cred-amber:var(--cred-amber-dark);
  }
}
:root[data-theme="dark"] {
  --canvas:var(--canvas-dark);--surface:var(--surface-dark);--surface-cream-soft:var(--surface-cream-soft-dark);
  --cream:var(--cream-dark);--cream-deeper:var(--cream-deeper-dark);--beige-deep:var(--beige-deep-dark);--footer-cream:var(--footer-cream-dark);
  --hairline:var(--hairline-dark);--hairline-soft:var(--hairline-soft-dark);--hairline-strong:var(--hairline-strong-dark);
  --ink:var(--ink-dark);--ink-tint:var(--ink-tint-dark);--charcoal:var(--charcoal-dark);--slate:var(--slate-dark);
  --steel:var(--steel-dark);--stone:var(--stone-dark);--muted:var(--muted-dark);
  --on-cream:var(--on-cream-dark);--link-hover:var(--link-hover-dark);--cred-amber:var(--cred-amber-dark);
}