/* ============================================================================
   Homeboss Theme — DESIGN TOKENS
   ----------------------------------------------------------------------------
   ONE theme with a swappable token set (NOT three themes). Semantic roles only,
   so a palette change is a token change and nothing downstream moves.

   THREE PRESETS, PICKED BY NAME (never by colour). The agent chooses one word at
   setup; it rides /site-data as brand.palette and the theme puts it on <html> as
   data-hb-palette. Palette 1 (Navy & Gold) is the :root default; palettes 2 and 3
   (Charcoal & Brass, Slate & Copper) are attribute-scoped OVERRIDES of the same
   semantic roles below — no agent-typed colour ever enters. All three are
   LOGO-NEUTRAL: a dark neutral base plus one metallic accent (gold / brass /
   copper), never a saturated hue, so any logo sits cleanly on top.

   #b1d4e0 is intentionally EXCLUDED from every palette: it fails contrast on
   white (~1.5:1 against the 4.5:1 minimum). Soft callouts use --surface-tint
   (derived from --action) instead. Surfaces alternate --surface-base and
   --surface-alt band-to-band for section separation, not borders.

   Every colour pair in every preset clears WCAG AA — enforced numerically per
   preset in tests/themeTokens.test.ts (the contrast check fires once per palette).
   See docs/THEME_BUILD_SPEC.md §1/§8.
   ============================================================================ */

:root {
  /* --- Palette 1 — Navy & Gold (default) ----------------------------------- */
  --surface-base:  #ffffff;   /* primary band                                */
  --surface-alt:   #f1f1f1;   /* alternating band                            */
  --surface-tint:  #eef2f6;   /* soft callout / review card, from --action   */
  --text-body:     #111111;   /* body copy                                   */
  --text-heading:  #1E3653;   /* headings                                    */
  --action:        #345e7d;   /* links, primary buttons, eyebrow             */
  --action-hover:  #033B4F;   /* link / button hover                         */
  --footer-bg:     #1E3653;   /* footer background                           */
  --footer-text:   #f1f1f1;   /* footer text + footer links                  */

  /* --- Gold accent (redesign) --------------------------------------------- *
     The homepage's accent: the section "gold rule", the "Book a Call" button and
     other primary CTAs. --accent-gold-ink is the DARK navy text painted ON gold
     (rgb 193,154,62 vs rgb 30,54,83 clears WCAG AA at ~4.8:1). Gold is an accent
     only — never a text color on white (it would fail contrast there).           */
  --accent-gold:       #c19a3e;
  --accent-gold-hover: #a8842f;
  --accent-gold-ink:   #1E3653;

  /* --- Type families ------------------------------------------------------- */
  --font-heading: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Type scale (desktop) — THEME_BUILD_SPEC.md §2 ----------------------- */
  --fs-h1:       44px;   /* Display / H1 — Outfit 600                         */
  --fs-h2:       32px;   /* H2          — Outfit 600                         */
  --fs-h3:       24px;   /* H3          — Outfit 500                         */
  --fs-eyebrow:  13px;   /* Eyebrow     — Outfit 600, uppercase, tracked     */
  --fs-body:     17px;   /* Body        — Inter 400, line-height 1.65        */
  --fs-small:    14px;   /* Small / caption / compliance — 14px minimum      */

  /* --- Weights ------------------------------------------------------------- */
  --fw-heading:  600;
  --fw-h3:       500;
  --fw-eyebrow:  600;
  --fw-body:     400;

  /* --- Rhythm + measure ---------------------------------------------------- */
  --lh-heading:       1.2;
  --lh-body:          1.65;
  --tracking-eyebrow: 0.12em;
  --measure:          70ch;    /* body measure cap ~70 characters (prose only) */

  /* --- Layout container ---------------------------------------------------- *
     The shared max width every full-width band centers its content in. Widened
     from the old baked 1080px so short sections read WIDE-AND-SHORT rather than
     narrow-and-tall. Long-form PROSE still caps at --measure inside this frame. */
  --container:        1200px;
}

/* ============================================================================
   Palette 2 — Charcoal & Brass  (data-hb-palette="charcoal-brass")
   ----------------------------------------------------------------------------
   Dark warm-charcoal neutral + a brass metallic accent. Overrides ONLY the
   colour roles; the type scale, fonts + rhythm stay shared with :root. Every
   pair clears AA (checked in tests/themeTokens.test.ts).
   ============================================================================ */
html[data-hb-palette="charcoal-brass"] {
  --surface-base:  #ffffff;
  --surface-alt:   #f2f2f0;
  --surface-tint:  #efece6;
  --text-body:     #141414;
  --text-heading:  #2b2f36;
  --action:        #4a4f57;
  --action-hover:  #2b2f36;
  --footer-bg:     #2b2f36;
  --footer-text:   #f2f2f0;
  --accent-gold:       #b08d47;   /* brass                                   */
  --accent-gold-hover: #977832;
  --accent-gold-ink:   #23262b;   /* dark charcoal ink ON brass              */
}

/* ============================================================================
   Palette 3 — Slate & Copper  (data-hb-palette="slate-copper")
   ----------------------------------------------------------------------------
   Cool blue-slate neutral + a copper metallic accent. Same role-only override.
   ============================================================================ */
html[data-hb-palette="slate-copper"] {
  --surface-base:  #ffffff;
  --surface-alt:   #f1f2f3;
  --surface-tint:  #eceef0;
  --text-body:     #121417;
  --text-heading:  #2e3a44;
  --action:        #3f5666;
  --action-hover:  #2b3d49;
  --footer-bg:     #2e3a44;
  --footer-text:   #f1f2f3;
  --accent-gold:       #c98a5c;   /* copper                                  */
  --accent-gold-hover: #b0703f;
  --accent-gold-ink:   #23303a;   /* dark slate ink ON copper                */
}

/* --- Type scale (mobile) — THEME_BUILD_SPEC.md §2 ------------------------- */
@media (max-width: 640px) {
  :root {
    --fs-h1:   32px;
    --fs-h2:   26px;
    --fs-h3:   20px;
    --fs-body: 16px;
  }
}