/* ==========================================================================
   GENESIS EVENTS — DESIGN TOKENS
   Extracted from the live site (genesisevents.com — Ohio theme + Typekit),
   2026-07-13. Single source of truth for all custom PHP/ACF page templates.

   Load this FIRST (before genesis-components.css) in the child theme.
   Fonts come from Adobe Typekit kit `cwx5mcx` — enqueue that stylesheet too
   (see starter/functions-genesis.php).
   ========================================================================== */

:root {

  /* --- Brand color palette (Ohio customizer presets) --------------------- */
  --gen-gold:          #cca64a;   /* PRIMARY brand accent — rules, CTAs, links, kickers */
  --gen-gold-bright:   #fbce44;   /* link hover / highlight only, sparingly */
  --gen-bronze:        #a1824f;   /* secondary metallic — borders, subtle fills */
  --gen-dark:          #24262b;   /* primary dark ground — dark sections, footer */
  --gen-dark-panel:    #32353c;   /* raised panel on dark */
  --gen-black:         #000005;   /* deepest background */
  --gen-grey:          #838998;   /* muted text on dark */
  --gen-white:         #ffffff;

  /* Semantic aliases (use these in components, not the raw names above) */
  --gen-color-primary:      var(--gen-gold);
  --gen-color-link:         var(--gen-gold);
  --gen-color-link-hover:   var(--gen-gold-bright);
  --gen-color-heading:      var(--gen-dark);      /* headings on light */
  --gen-color-body:         #1c1e22;              /* body ink on light */
  --gen-color-muted:        #5c626e;              /* secondary text on light */
  --gen-color-bg:           var(--gen-white);
  --gen-color-bg-alt:       #faf7f1;              /* warm off-white section band */
  --gen-color-border:       #e4ded2;
  --gen-color-on-dark:      var(--gen-white);
  --gen-color-on-dark-muted:var(--gen-grey);

  /* --- Typography families (Typekit cwx5mcx) ----------------------------- */
  --gen-font-body:     "neue-haas-grotesk-display", "Inter", Arial, sans-serif;
  --gen-font-heading:  "neue-haas-grotesk-display", "Inter", Arial, sans-serif;
  --gen-font-display:  "meno-display-extra-condensed", "Cardo", Georgia, serif; /* big hero/display */
  --gen-font-serif:    "Cardo", Georgia, serif;   /* editorial serif accent */

  --gen-fw-light:    300;   /* meno-display ships at 300 */
  --gen-fw-normal:   400;
  --gen-fw-medium:   500;
  --gen-fw-semibold: 600;
  --gen-fw-bold:     700;

  /* --- Type scale (ratio 0.68 from h1 4.5rem; responsive clamp) ----------
     min = mobile floor, max = desktop. Matches Ohio's clamp() behavior.     */
  --gen-h1: clamp(2.70rem, 5.5vw, 4.50rem);   /* 43 → 72px | lh 1.05 | ls -.045em */
  --gen-h2: clamp(1.96rem, 4.2vw, 3.06rem);   /* 31 → 49px | lh 1.15 | ls -.04em  */
  --gen-h3: clamp(1.50rem, 3.0vw, 2.08rem);   /* 24 → 33px | lh 1.25 */
  --gen-h4: clamp(1.25rem, 2.2vw, 1.42rem);   /* 20 → 23px | lh 1.30 */
  --gen-h5: clamp(1.10rem, 1.6vw, 1.19rem);   /* 18 → 19px | lh 1.35 */
  --gen-h6: 1.025rem;                          /* = body */
  --gen-display: clamp(3.2rem, 9vw, 7.0rem);   /* oversized hero (meno-display) */

  --gen-text:       1.025rem;   /* base body ~16.4px */
  --gen-text-lg:    1.15rem;
  --gen-text-sm:    0.9rem;
  --gen-text-xs:    0.8rem;
  --gen-eyebrow:    0.72rem;    /* uppercase kicker */

  --gen-lh-heading: 1.15;
  --gen-lh-body:    1.6;
  --gen-lh-tight:   1.05;
  --gen-ls-heading: -0.02em;
  --gen-ls-eyebrow: 0.22em;

  /* --- Spacing scale (WP preset steps 20–80) ----------------------------- */
  --gen-space-1: 0.44rem;
  --gen-space-2: 0.67rem;
  --gen-space-3: 1rem;
  --gen-space-4: 1.5rem;
  --gen-space-5: 2.25rem;
  --gen-space-6: 3.38rem;
  --gen-space-7: 5.06rem;
  --gen-section-y: clamp(3.5rem, 8vw, 7rem);   /* vertical rhythm between sections */

  /* --- Layout ------------------------------------------------------------ */
  --gen-container:      1344px;   /* max content width */
  --gen-container-text: 760px;    /* comfortable measure for long-form copy */
  --gen-gutter:         clamp(1.25rem, 7vw, 6rem);

  /* --- Radius, borders, shadows ------------------------------------------ */
  --gen-radius:     8px;
  --gen-radius-btn: 8px;
  --gen-radius-lg:  16px;
  --gen-border:     1px solid var(--gen-color-border);

  --gen-shadow-natural: 6px 6px 9px rgba(0,0,0,.2);
  --gen-shadow-deep:    12px 12px 50px rgba(0,0,0,.4);
  --gen-shadow-soft:    0 10px 30px rgba(36,38,43,.08);

  /* --- Motion ------------------------------------------------------------ */
  --gen-transition: 0.28s cubic-bezier(.2,.6,.2,1);
}