/* ═══════════════════════════════════════════════════════════
   POP Workshops — Brand Tokens  (gospel: design-system/readme.md)
   Strict two-color system. Three typefaces. Three roles.
   ═══════════════════════════════════════════════════════════ */

/* Unbounded — Google Fonts (body / nav / caption) */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;700&display=swap");

/* The Foregen — secondary / structure */
@font-face {
  font-family: "The Foregen";
  src: url("../fonts/The-Foregen-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Les Flos Chaos — primary display / hero (chunky, hand-drawn) */
@font-face {
  font-family: "Les Flos Chaos";
  src: url("../fonts/Les-Flos-Chaos.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── Colour — pure black + pure white ONLY ── */
  --black: #000000;
  --white: #FFFFFF;

  /* ── Type families ── */
  --font-display:   "Les Flos Chaos", "Arial Black", sans-serif; /* hero + manifesto */
  --font-secondary: "The Foregen", Georgia, serif;               /* supporting structure */
  --font-body:      "Unbounded", "Helvetica Neue", Arial, sans-serif;

  /* ── Fluid display scale (clamp keeps headlines massive, never clipped) ── */
  --d-hero:    clamp(3.6rem, 12.5vw, 11rem);   /* hero headline */
  --d-section: clamp(2.8rem, 7.8vw, 8rem);     /* section openers */
  --d-card:    clamp(2rem, 4.4vw, 4rem);       /* card / pillar headline */
  --d-mega:    clamp(4rem, 16vw, 15rem);       /* manifesto / join slam */

  /* ── Body scale ── */
  --t-body:   clamp(1rem, 1.15vw, 1.35rem);
  --t-small:  clamp(0.82rem, 0.95vw, 1rem);
  --t-micro:  clamp(0.62rem, 0.78vw, 0.78rem);   /* uppercase labels */

  /* ── Spacing — 8pt grid ── */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;

  --pad-x: clamp(26px, 5vw, 88px);   /* content gutter */
  --nav-h: 96px;

  /* ── Echo technique ── */
  --echo-stroke: 1.5px;

  /* ── Motion ── */
  --ease-brand: cubic-bezier(0.7, 0, 0.18, 1);
  --lerp: 0.1;
}

@media (max-width: 767px) {
  :root { --nav-h: 74px; }
}