/* ============================================================================
   TRIUMPH DESIGN SYSTEM v2 — tokens.css
   Promotional graphics (flyers / digital ads / graphic elements).
   NOT the dashboard system at design.greenvilletriumph.club — this is the
   brand-guide look: light canvas, navy #002855, green gradient hero accent.
   Link order: tokens.css -> pattern.css -> logos.css -> components.css
   ========================================================================== */

/* ---- Fonts (self-hosted; NO CDN — office TLS inspection blanks CDN assets) -- */

/* Fabiola Capitals ships pathological vertical metrics (caps=0.70em float in a
   ~1.9em box -> renders small + top-glued). These three overrides re-box it to
   its real caps, centered. DO NOT REMOVE and DO NOT hand-nudge Fabiola headers
   with margin/line-height/translateY — that now double-corrects. Weight 400 only. */
@font-face {
  font-family: "Fabiola Capitals";
  src: url("fonts/Fabiola-Capitals.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 78%;
  descent-override: 8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Canonical brand palette (official Brandpad — 7, never extend) ------ */
  --navy:        #002855; /* Greenville Blue  · PMS 295C · primary / base surface */
  --green:       #61a631; /* Triumph Green    · PMS 369C · official primary green */
  --fog:         #f2fafa; /* Upstate Fog      · PMS 7541C · near-white page */
  --mist:        #d2e6e5; /* Morning Mist     · PMS 5455C · pale blue-grey */
  --night:       #020022; /* Deep Night       · Black 6C · near-black ink */
  --sky:         #69b3e7; /* accent (guide mislabels "Electric Lime") · PMS 292C */
  --lime:        #97d700; /* accent "Light Green" · PMS 375C · the promo hero accent */

  /* ---- Promo accent gradient — Sean's established flyer hero accent -------
     Runs LIGHT -> DARK green. Direction is law: NEVER flip it. */
  --green-dark:  #72b431;
  --grad-hero:   linear-gradient(100deg, var(--lime) 0%, var(--green-dark) 100%);
  --grad-rule:   linear-gradient(90deg, var(--green) 0%, var(--lime) 100%); /* thin accent underline */

  /* ---- Greenville Liberty (pulled in for on-demand joint/women's work) ----
     Official Brandpad: Greenville Blue + Liberty Yellow. Sean's flyer practice
     variant uses a deeper navy #182848 + #F8E008 — kept as *-deep tokens. */
  --liberty-navy:      #002855;
  --liberty-navy-deep: #182848;
  --liberty-yellow:    #ffe900; /* PMS 803C */
  --liberty-gold-deep: #f8e008;
  --liberty-sky:       #70b2e4;

  /* ---- Semantic surface / ink roles -------------------------------------- */
  --surface-light:  var(--fog);   /* default promo canvas (light) */
  --surface-navy:   var(--navy);  /* dark band / dark graphic canvas */
  --ink:            var(--navy);  /* headline ink on light */
  --ink-body:       #14304f;      /* softened navy for body on light */
  --ink-on-navy:    #ffffff;      /* text on navy */
  --ink-muted-navy: #9db6d0;      /* quiet label on navy */
  --hairline:       rgba(0,40,85,.14);

  /* ---- Type families ----------------------------------------------------- */
  --font-display: "Fabiola Capitals", sans-serif; /* NO serif fallback masking a failed load in prod; sans here only to avoid FOIT ugliness */
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Type scale --------------------------------------------------------
     Display = Fabiola (hero ONLY). Everything else = Inter. Never route
     working headings h2/h3 through Fabiola (it synthetic-bolds to mush). */
  --text-hero:    clamp(3.5rem, 2.4rem + 6vw, 8.5rem);  /* poster hero, Fabiola */
  --text-title:   clamp(2.25rem, 1.6rem + 3.2vw, 4rem); /* section title, Fabiola or Inter 900 */
  --text-xl:      2rem;
  --text-lg:      1.5rem;
  --text-md:      1.125rem;
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-label:   0.75rem;   /* the ONE uppercase-label size */
  --text-xs:      0.6875rem; /* absolute floor — nothing smaller */

  --leading-hero: 0.9;   /* tight poster leading */
  --leading-tight: 1.08;
  --leading-body: 1.5;

  --track-label:   0.14em; /* uppercase eyebrow / label */
  --track-kicker:  0.2em;
  --track-hero:    0;      /* Brandpad: no tracking on the Fabiola H1 */

  /* ---- Spacing (8pt-ish rhythm) ------------------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-section: 72px;

  /* ---- Radius — SHARP by default (only pills/thumbs get round) ----------- */
  --radius: 0px;
  --radius-sm: 2px;
  --radius-full: 999px;

  /* ---- Weave pattern hooks (see pattern.css) ----------------------------- */
  --brand-pattern-white: url("images/brand/triumph-pattern-fog.png");  /* 516x688 seamless, WHITE on transparent -> dark surfaces */
  --brand-pattern-navy:  url("images/brand/triumph-pattern-navy.png"); /* 1600x1600 seamless SQUARE, NAVY on transparent -> light surfaces */
  --brand-pattern-size:  165px 220px; /* 3:4 scale of the true 516x688 period. background-size MUST stay 3:4. */
}

/* ---- Base reset relevant to type correctness ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-body);
  background: var(--surface-light);
  font-synthesis: none;          /* GUARD: never fake-bold Fabiola into mush */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display helper: the ONE correct way to set a Fabiola hero. */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--track-hero);
  text-transform: none;          /* the OTF is already all-caps */
  text-box-trim: trim-both;      /* trims the phantom em box where supported */
  text-box-edge: cap alphabetic;
  margin: 0;
}