/* ============================================================================
   SPORT BRIDGE — Design Tokens  v1.0
   Dark-first. Derived from the locked logo (navy ground, gold + steel strokes).
   Every value here is the source of truth. Reference vars; never hard-code.
   ============================================================================ */

:root {
  /* ── Color · core ──────────────────────────────────────────────────── */
  --navy:        #0D1E33;   /* primary ground — read straight off the logo BG  */
  --navy-panel:  #151A31;   /* logo inner panel — slightly cooler/deeper       */
  --navy-deep:   #0A1726;   /* deepest — section contrast, footers             */
  --navy-raise:  #16263F;   /* raised surface on navy (cards on dark)          */

  --gold:        #C9A24E;   /* warm gold — ACCENT only (text, lines, details)  */
  --gold-bright: #E2BA6D;   /* gold highlight — gradients, hover               */
  --gold-deep:   #A8823A;   /* gold shadow end                                 */

  --steel:       #BAC8D3;   /* steel blue — secondary accent (from right span) */
  --steel-dim:   #8597A8;   /* muted steel — captions, meta on navy            */

  --cream:       #F4F1EA;   /* off-white — primary text on navy, light surface */
  --cream-dim:   #C9CCce;   /* dimmed cream                                    */
  --ink:         #11161F;   /* near-black — text on cream/light                */
  --ink-soft:    #3A424E;   /* secondary text on light                         */

  /* ── Functional aliases ────────────────────────────────────────────── */
  --bg:            var(--navy);
  --bg-panel:      var(--navy-panel);
  --bg-deep:       var(--navy-deep);
  --fg:            var(--cream);
  --fg-muted:      var(--steel-dim);
  --accent:        var(--gold);

  /* light-surface aliases (when a section flips to cream) */
  --bg-light:      var(--cream);
  --fg-on-light:   var(--ink);
  --fg-on-light-muted: var(--ink-soft);

  /* ── Hairlines / borders ───────────────────────────────────────────── */
  --hair:          rgba(244, 241, 234, 0.14);   /* on navy   */
  --hair-strong:   rgba(244, 241, 234, 0.26);
  --hair-gold:     rgba(201, 162, 78, 0.45);
  --hair-on-light: rgba(17, 22, 31, 0.12);      /* on cream  */

  /* ── Gradients ─────────────────────────────────────────────────────── */
  --grad-gold:  linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  --grad-steel: linear-gradient(135deg, var(--steel) 0%, var(--steel-dim) 100%);
  --glow-gold:  radial-gradient(circle, rgba(201,162,78,0.16) 0%, transparent 60%);

  /* ── Typography ────────────────────────────────────────────────────── */
  /* --serif is swapped at runtime by the Tweaks panel (Cormorant ⇄ Playfair) */
  --serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Serif headings run large + airy; this multiplier lets both serifs sit right */
  --serif-tracking: 0em;

  /* Type scale — generous, executive. Major-third-ish (1.25) but headlines bigger. */
  --t-hero:    clamp(3rem, 7vw, 5.6rem);     /* hero display (capped so the hero fits one screen on wide displays) */
  --t-h1:      clamp(2.5rem, 5vw, 4.25rem);
  --t-h2:      clamp(2rem, 3.5vw, 3rem);
  --t-h3:      clamp(1.5rem, 2.2vw, 2rem);
  --t-h4:      1.5rem;
  --t-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:    1.0625rem;    /* 17px — comfortable executive body            */
  --t-sm:      0.9375rem;
  --t-eyebrow: 0.75rem;      /* small caps label                            */
  --t-mono:    0.8125rem;

  --lh-tight:   1.04;
  --lh-snug:    1.2;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --tracking-eyebrow: 0.26em;
  --tracking-caps:    0.18em;

  /* ── Spacing (8-pt base, generous) ─────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 10rem;   --s-12: 14rem;

  --section-y: clamp(5rem, 10vw, 10rem);   /* vertical rhythm between sections */
  --gutter:    clamp(1.5rem, 5vw, 6rem);   /* page side margins                */
  --maxw:      1320px;
  --measure:   68ch;

  /* ── Radius ────────────────────────────────────────────────────────── */
  /* --radius is swapped by Tweaks (sharp 0 ⇄ soft). Default: subtle. */
  --radius:      4px;
  --radius-lg:   8px;
  --radius-pill: 999px;
  --radius-chip: 6px;

  /* ── Shadow / elevation (subtle, premium) ──────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-gold: 0 8px 32px rgba(201,162,78,0.18);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       340ms;
  --dur-slow:  680ms;
}

/* ── Base reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Reusable type classes ─────────────────────────────────────────────── */
.serif      { font-family: var(--serif); font-weight: 500; letter-spacing: var(--serif-tracking); }
.display    { font-family: var(--serif); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--serif-tracking); }
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.mono { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.04em; color: var(--steel-dim); }
.lead { font-size: var(--t-lead); line-height: var(--lh-relaxed); color: var(--cream-dim); }

/* ── Layout helpers ────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

/* gold rule with center dot — recurring divider motif */
.rule-gold { height: 1px; background: var(--hair-gold); width: 100%; }

/* the recurring "bridge the gap" band uses this */
.band {
  background: var(--navy-deep);
  border-block: 1px solid var(--hair);
}