/* =============================================================
   THE HIVE COACHING CO. — DESIGN TOKENS
   Source of truth: the-hive-brand-system-v4.html :root (canonical)
   Every value below is verbatim from the brand system. The two
   neutrals and the ink that were proposed in the earlier draft are
   now locked to the real values. Handoff §6 (Tenor/Baginda/Poppins,
   honey-gold palette) is RETIRED — do not reintroduce.
   ============================================================= */

:root {

  /* --- 01 · PALETTE — 13 tokens, verbatim from the system -------- */
  --teal-deep:   #2E5F6B;  /* Anchor. True blue-teal. Headlines, wordmark, dark canvases */
  --teal-mid:    #4A7B86;  /* Mid blue-teal */
  --teal-soft:   #7AA5B0;  /* Soft blue-teal */
  --mist:        #B8CDD3;  /* Cool blue-grey wash */
  --honey:       #B8854A;  /* Primary accent. Grounds the palette. 2nd-most-used color */
  --honey-soft:  #DBB382;  /* Soft honey wash (the spec's "Wheat") */
  --blush:       #C99B95;  /* Warm blush — a quiet feminine pulse */
  --blush-soft:  #E5CFC8;  /* Petal */
  --lavender:    #A89FBE;  /* GRACE NOTE ONLY — one element per layout, never a ground */
  --warm-white:  #F2EDE5;  /* Page ground ("Concrete floor") */
  --cream:       #E8DFCF;  /* Deeper warm tone for alternating sections ("Boucle sofa") */
  --ink:         #2A2825;  /* Body copy — warm near-black */
  --ink-soft:    #5C544D;  /* Muted: captions, meta */

  /* --- 02 · SEMANTIC ALIASES (reference these in components) ----- */
  --color-bg:          var(--warm-white);
  --color-bg-alt:      var(--cream);        /* alternating / recessed sections */
  --color-heading:     var(--teal-deep);
  --color-text:        var(--ink);
  --color-text-muted:  var(--ink-soft);
  --color-accent:      var(--honey);
  --color-accent-soft: var(--honey-soft);
  --color-secondary:   var(--blush);
  --color-grace:       var(--lavender);
  --color-on-dark:     var(--warm-white);   /* text/marks on teal-deep sections */

  /* Link & button states — from teal-deep + honey */
  --link:             var(--teal-deep);
  --link-hover:       var(--honey);
  --btn-bg:           var(--teal-deep);
  --btn-text:         var(--warm-white);
  --btn-bg-hover:     #274F59;   /* teal-deep -8% */
  --btn-accent-bg:    var(--honey);
  --btn-accent-hover: #A6763E;   /* honey -8% */
  --focus-ring:       var(--honey);

  /* --- 03 · TYPOGRAPHY (roles + body verbatim; display scale derived) */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif; /* headlines: extra-light + italic, set tight */
  --font-hand:    "Homemade Apple", "Segoe Script", cursive;       /* Linda's voice: quotes/asides, rotate 1-2deg */
  --font-body:    "Gentium Plus", Georgia, serif;                  /* all running copy */
  --font-util:    "Outfit", system-ui, -apple-system, sans-serif;  /* UTILITY ONLY, 11-13px, letter-spaced */

  --fw-display:   300;    /* extra-light per spec */
  --fw-display-x: 200;    /* the largest hero moments */
  --fw-body:      400;
  --fw-util:      500;

  /* body size + rhythm are VERBATIM from the system (17px / 1.7) */
  --fs-body:      1.0625rem;                                   /* 17px */
  --lh-body:      1.7;
  /* display scale — derived to honor "set tight, let it breathe" */
  --fs-hero:      clamp(3rem, 6vw + 1rem, 4.75rem);
  --fs-h1:        clamp(2.5rem, 4vw + 1rem, 3.5rem);
  --fs-h2:        clamp(1.875rem, 2.5vw + 1rem, 2.5rem);
  --fs-h3:        1.75rem;
  --fs-lead:      1.375rem;
  --fs-small:     0.9375rem;                                   /* 15px */
  --fs-caption:   0.8125rem;                                   /* 13px — Outfit cap */
  --fs-micro:     0.6875rem;                                   /* 11px — Outfit floor */

  --lh-tight:     1.08;   /* display */
  --lh-snug:      1.25;   /* subheads */
  --lh-util:      1.3;
  --ls-util:      0.14em; /* Outfit "letter-spaced wide" */
  --ls-display:  -0.01em;

  /* --- 04 · SPACING (4px rhythm) -------------------------------- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;
  --space-24:6rem; --space-32:8rem;

  /* --- 05 · RADII / BORDERS (soft, sure-footed) ---------------- */
  --radius-sm:6px; --radius:12px; --radius-lg:20px; --radius-pill:999px;
  --hairline: 1px solid color-mix(in srgb, var(--teal-deep) 14%, transparent);

  /* --- 06 · ELEVATION (warm, low-contrast) --------------------- */
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--teal-deep) 10%, transparent);
  --shadow:    0 8px 28px color-mix(in srgb, var(--teal-deep) 12%, transparent);

  /* --- 07 · LAYOUT --------------------------------------------- */
  --measure: 66ch; --container: 1240px; --container-narrow: 760px;
}

/* =============================================================
   USAGE NOTES (keep true in every component)
   · 70 / 20 / 10 : ~70% warm neutral ground, ~20% teal-deep
     (headlines, wordmark, dark sections), ~10% accents (honey does
     most; blush + lavender split the small remainder). No block is
     ever mostly accent-colored.
   · Lavender = ONE element per layout. Never a background.
   · Homemade Apple = one handwritten moment per view, rotated 1-2deg.
     Never body, never nav.
   · Outfit = utility only, 11-13px, letter-spaced. Never body.
   · Icons: recolor in brand colors at 100% opacity, one per layout,
     always with breathing room.
   · Cert seals: footer / About / email signature only. Footer
     placement = the faith-signal decision still open with Linda.
   ============================================================= */

*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}