/* ============================================================
   PIONEERS Design System — Colors & Type
   v1.0 — Derived from PIONEERS Brand & Design Guidelines v1.5
   ============================================================ */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Formula Condensed";
  src: url("../fonts/FormulaCondensed-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Formula Condensed Wide";
  src: url("../fonts/FormulaCondensedWide-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir Narrow";
  src: url("../fonts/Agrandir-Narrow.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir Narrow";
  src: url("../fonts/Agrandir-NarrowItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir Narrow";
  src: url("../fonts/Agrandir-NarrowBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir Narrow";
  src: url("../fonts/Agrandir-NarrowBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     CORE COLOR PALETTE
     Distribution: White 50% · Asphalt 35% · Gray 10% · Wisteria 5%
     ============================================================ */
  --white:      #FFFFFF;   /* primary background */
  --asphalt:    #00061C;   /* primary text + ink — used in place of pure black */
  --gray:       #E7E8E9;   /* subtle outlines, boxes, dividers */
  --wisteria:   #B79CED;   /* accent / highlight (use sparingly) */

  /* ============================================================
     CREATIVE COLOR PALETTE — three "flavors", never mixed
     Each flavor pairs a pastel with a saturated counterpart.
     ============================================================ */
  /* Flavor 1 — Warm */
  --sunset:     #F7D7A0;
  --gold:       #FFB100;

  /* Flavor 2 — Purple */
  --wisteria-2: #B79CED;   /* same as core wisteria */
  --slate-blue: #725AC1;

  /* Flavor 3 — Green */
  --tea-green:  #D1FFC6;
  --sea-green:  #09814A;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */
  --bg:          var(--white);
  --bg-chapter:  var(--asphalt);   /* only for chapter / section slides */
  --fg:          var(--asphalt);
  --fg-muted:    #4A4F5C;          /* asphalt @ ~70% optical */
  --fg-inverse:  var(--white);
  --border:      var(--gray);
  --divider:     var(--gray);
  --accent:      var(--wisteria);
  --accent-strong: var(--slate-blue);
  --highlight:   var(--gold);

  /* ============================================================
     TYPE FAMILIES
     Headlines → Formula Condensed (UPPERCASE)
     Wide glyphs → Formula Condensed Wide (one per line, sparingly)
     Body / secondary → Agrandir Narrow
     ============================================================ */
  --font-display:   "Formula Condensed", "Oswald", "Barlow Condensed", Impact, sans-serif;
  --font-display-w: "Formula Condensed Wide", "Formula Condensed", "Oswald", sans-serif;
  --font-body:      "Agrandir Narrow", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ============================================================
     TYPE TOKENS — sizes follow PIONEERS' 16:9 (960x540) baseline.
     Line-height 95% on display per spec; 116% on body.
     Letter-spacing 0% across the board.
     ============================================================ */
  --lh-display: 0.95;
  --lh-body:    1.16;
  --tracking:   0;

  /* Display scale (px) — scaled up from 960×540 spec for screens */
  --fs-ultra:        clamp(72px, 12vw, 240px);   /* "Quote / Chapter" 120pt @960 → ~12vw */
  --fs-h1:           clamp(48px, 6.5vw, 110px);  /* "Primary Headline" 52.5pt */
  --fs-h2:           clamp(22px, 2.6vw, 44px);   /* "Secondary Headline" 22.5pt — Agrandir Bold */
  --fs-h3:           clamp(18px, 1.6vw, 26px);
  --fs-body:         16px;                       /* spec 9pt body up to 12pt; web baseline 16 */
  --fs-body-lg:      18px;
  --fs-small:        13px;
  --fs-caption:      11px;

  /* ============================================================
     SPACING + GEOMETRY
     ============================================================ */
  --radius:        10px;   /* canonical radius (per CI guidelines) */
  --radius-sm:     6px;
  --radius-lg:     16px;
  --radius-pill:   999px;

  /* PIONEERS "line element" — 0.62% of long side, min 3px */
  --line-thin:    1px;
  --line-rule:    2px;     /* common UI rule */
  --line-thick:   3px;     /* minimum for the brand line element */
  --line-display: 6px;     /* large surface line element */

  /* Spacing scale (4pt base) */
  --space-0:  0;
  --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-10: 128px;

  /* Shadows — used sparingly; brand is flat-leaning */
  --shadow-1: 0 1px 2px rgba(0, 6, 28, 0.06), 0 1px 1px rgba(0, 6, 28, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 6, 28, 0.08);
  --shadow-3: 0 16px 40px rgba(0, 6, 28, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Display headlines: Formula Condensed, UPPERCASE, 95% lh ----- */
h1, h2, .display, .ultra {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking);
  font-weight: 400;
  margin: 0;
}

.ultra {                              /* tagline / chapter / quote */
  font-size: var(--fs-ultra);
}

h1, .h1 {                              /* Primary Headline */
  font-size: var(--fs-h1);
}

/* ----- Secondary headline: Agrandir Bold (mixed case) ----- */
h2, .h2 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0;
}

/* Eyebrows / labels — small caps display feel */
.eyebrow, .label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--fg);
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); }
.body-sm { font-size: var(--fs-small);  }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

/* Code (informational only — brand has no programming context) */
code, pre, kbd {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.95em;
}

/* ----- Wide-glyph utility — emphasize ONE glyph per line ----- */
.wide {
  font-family: var(--font-display-w);
}

/* ----- "We are PIONEERS" lockup helper ----- */
.brand-pioneers {
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: inherit;
}

/* Links */
a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

/* ----- The PIONEERS line element (.line) ----- */
.line {
  display: block;
  width: 100%;
  height: var(--line-thick);
  background: currentColor;
  border: 0;
}
hr { border: 0; height: var(--line-rule); background: var(--asphalt); }

/* ============================================================
   SURFACES (cards / boxes)
   Soft 10px corners; thin gray rule; no heavy shadows by default.
   ============================================================ */
.surface {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.surface-ink {                         /* chapter / dark surface */
  background: var(--asphalt);
  color: var(--white);
  border-radius: var(--radius);
}

/* ============================================================
   FOCUS — accessible, brand-aligned ring
   ============================================================ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--asphalt);
  outline-offset: 2px;
  border-radius: 4px;
}