/* =========================================================================
   Design tokens — the single source of truth for Primal Elite's visual
   language. Warm obsidian surfaces, bone ink, forged bronze + oxblood.
   A premium ancestral provisioner: butcher-shop confidence, apothecary care.
   ========================================================================= */

:root {
  /* ---- Color: surfaces (warm ivory pages — matches the logo) ---------- */
  --bg:            #f7f3ea;
  --bg-raised:     #f0ead9;
  --bg-card:       #fffdf7;
  --bg-card-hover: #f6f0e3;
  --bg-inset:      #ece5d4;

  /* ---- Color: ink (warm near-black on ivory) -------------------------- */
  --ink:        #1c1710;
  --ink-soft:   #574e40;
  --ink-faint:  #6e6555;   /* darkened for AA (4.5:1) on ivory small text */
  --ink-on-light: #14110b;
  --oxblood-ink: #efe8da;  /* bone text on the oxblood badge chip */

  /* ---- Color: accents (deepened for legibility on ivory; brighter
     variants are re-scoped onto the dark blocks below) ----------------- */
  --bronze:     #b3822c;
  --bronze-deep:#8f6c2c;
  --gold:       #a9791f;
  --oxblood:    #7e2f24;
  --ember:      #b04a32;

  --accent:        var(--bronze);
  --accent-strong: var(--gold);
  --accent-ink:    #1a1305; /* text on accent fills */

  /* ---- Lines & dividers (dark hairlines on ivory) --------------------- */
  --line:        rgba(28, 22, 14, 0.14);
  --line-strong: rgba(28, 22, 14, 0.26);
  --line-faint:  rgba(28, 22, 14, 0.07);

  /* ---- Feedback colors ------------------------------------------------ */
  --ok:    #5f8043;
  --warn:  #a9791f;
  --error: #b0472f;

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Fluid modular scale (min .. max) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.35vw, 2.85rem);
  --step-4:  clamp(2.30rem, 1.80rem + 2.40vw, 4.20rem);
  --step-5:  clamp(2.90rem, 2.05rem + 4.10vw, 6.00rem);

  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.65;

  /* Tracking for the mono eyebrows / labels */
  --track-label: 0.18em;

  /* Reading measure */
  --measure: 64ch;

  /* ---- Spacing scale -------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout --------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 64px;      /* real sticky-header height — every sticky offset uses it */
  --tap: 44px;           /* minimum comfortable touch target */

  /* ---- Radii (restrained — forged, not bubbly) ------------------------ */
  --radius-sm: 2px;
  --radius:    5px;
  --radius-lg: 9px;
  --radius-pill: 999px;

  /* ---- Shadows (subtle, warm — on ivory) ------------------------------ */
  --shadow-1: 0 1px 2px rgba(28, 22, 14, 0.10);
  --shadow-2: 0 24px 60px -30px rgba(28, 22, 14, 0.22);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;

  /* ---- Z-index -------------------------------------------------------- */
  --z-header: 100;
}

/* =========================================================================
   Dark context — the top (announcement + header), the hero, and the footer
   stay dark while the pages are ivory. Re-scoping the surface / ink / line /
   accent tokens flips everything inside these blocks to the dark palette
   (their descendants read the scoped values). Add `dark-section` to any other
   block you want dark.
   ========================================================================= */
.announce,
.site-header,
.site-footer,
.hero,
.dark-section {
  --bg:            #0c0b09;
  --bg-raised:     #131210;
  --bg-card:       #19170f;
  --bg-card-hover: #221e15;
  --bg-inset:      #080706;

  --ink:        #efe8da;
  --ink-soft:   #c2b8a4;
  --ink-faint:  #8c8472;

  --bronze:     #c89b4a;   /* brighter gold reads better on near-black */
  --gold:       #e2bd6f;

  --line:        rgba(239, 232, 218, 0.12);
  --line-strong: rgba(239, 232, 218, 0.24);
  --line-faint:  rgba(239, 232, 218, 0.06);

  --shadow-2: 0 22px 60px -28px rgba(0, 0, 0, 0.8);

  color: var(--ink);
}

/* The footer element itself has no background — give it the dark inset. */
.site-footer { background-color: var(--bg-inset); }