/* ============================================================
   SYSTEM CORE — structure only, ZERO brand decisions.
   Layer 1 of the cascade every site is built from:

     1. system/core.css          structure (this file)
     2. brands/<brand>/theme.css the look (colors, fonts, radius)
     3. clients/<slug>/theme.css local overrides (loads last, wins)

   Nothing in here names a color, a font family, or a corner
   radius — those are brand tokens this file CONSUMES via var().
   A BAM site and a fully custom academy share every rule below.

   Edit this + the brand theme, then run:
       node scripts/sync-design.mjs          (regenerate mirrors)
       node scripts/sync-design.mjs --check  (CI guard: fails on drift)
   ============================================================ */

:root {
  /* ----- TYPE SCALE (fluid) ----- */
  --t-hero:     clamp(56px, 9vw, 168px);  /* hero display */
  --t-display:  clamp(48px, 7vw, 120px);  /* section display titles */
  --t-h1:       clamp(40px, 6vw, 86px);
  --t-h2:       clamp(32px, 4vw, 56px);
  --t-h3:       clamp(24px, 2.6vw, 42px);
  --t-stat:     clamp(56px, 8vw, 120px);  /* stat numerals */
  --t-stat-xl:  clamp(120px, 22vw, 360px);/* stats-as-typography */
  --t-lede:     clamp(17px, 1.4vw, 22px);
  --t-body:     17px;
  --t-small:    15px;
  --t-eyebrow:  12px;

  /* ----- SPACING / LAYOUT ----- */
  --container:   1320px;
  --container-wide: 1600px;
  --gutter:      clamp(20px, 4vw, 56px);
  --section-pad: clamp(120px, 18vh, 200px);

  /* ----- MOTION ----- */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-y:    14px;      /* scroll-fade rise distance */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — structure of the type system.
   Every value that carries brand (family, color, spacing feel)
   resolves from the brand theme's tokens.
   ============================================================ */
.ds-h1, .ds-h2, .ds-h3, .ds-display, .ds-hero {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}
.ds-hero    { font-size: var(--t-hero);    line-height: 0.88; }
.ds-display { font-size: var(--t-display); }
.ds-h1      { font-size: var(--t-h1); }
.ds-h2      { font-size: var(--t-h2); }
.ds-h3      { font-size: var(--t-h3); }

/* Accent emphasis inside headlines — the signature <em> treatment */
.ds-h1 em, .ds-h2 em, .ds-h3 em, .ds-display em, .ds-hero em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.ds-eyebrow--rule::before { content: ''; width: 32px; height: 1px; background: var(--accent); }

/* Blackletter eyebrow (a brand may point --font-blackletter anywhere) */
.ds-eyebrow-adapt {
  font-family: var(--font-blackletter);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  color: var(--accent);
  line-height: 1.1;
}

.ds-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-muted);
}
.ds-lede {
  font-family: var(--font-body);
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--fg-muted);
}
.ds-stat {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: var(--ls-display);
}
.ds-label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}