/* Vendored from design/tokens.css, with ONE deliberate change.
   Re-copy if the design pack is updated, then re-apply the change below.

   DEVIATION FROM THE DESIGN PACK (owner's decision, Sep 2026):
   The site is dark for everyone. The pack shipped a light palette under
   `@media (prefers-color-scheme: light)`; that block has been removed and
   `color-scheme` pinned to dark.

   Why it could not be "dark unless the visitor chose light": the media
   feature only ever reports `light` or `dark`. A browser that was never
   configured reports `light`, identically to one deliberately set to light,
   and `no-preference` was dropped from the spec and ships nowhere. So
   following the OS meant most visitors got the light palette. Forcing dark
   was chosen over adding a toggle.

   The light comps in design/reference/screenshots/**-light/ are now
   historical: do not compare against them. */
/* Blurred Lines: design tokens. Dark grey is the default; light applies only when the device asks for it. */
:root {
  color-scheme: dark;
  --bg-0: #1E1E22;
  --bg-1: #26262B;
  --bg-2: #303036;
  --footer: #161619;
  --line: #45454D;
  --text: #F2EFE8;
  --muted: #B9B5C0;
  --accent-text: #FF5C86;
  --input-bg: #2A2A30;
  --input-border: #F2EFE8;
  --focus: #F2EFE8;
  --error: #FF8A96;
  --ok: #7CE0A0;
  --teen-bg: #25222C;
  --teen-card: #312D3A;

  /* brand colours: same in both modes */
  --pink: #FF3E6C;
  --yellow: #F2EA0C;
  --purple: #7B2FF2;
  --cyan: #1E9BF0;
  --red: #E5182D;
  --ink: #131316;
  --white: #FFFFFF;
  /* expansion accents */
  --trolley-a: #F2EA0C;
  --trolley-b: #FF3E6C;
  --scitech-a: #C6F000;
  --scitech-b: #1E9BF0;
  --philosophy-a: #D9A93E;
  --philosophy-b: #2B2A78;
  --cyberpunk-a: #FF3E6C;
  --cyberpunk-b: #1E9BF0;
  /* Blurped Lines */
  --lemon: #FAEB2C;
  --sky: #6FB4D6;
  --coral: #F2604B;
  --mint: #7ED6B2;
  --bubble: #FF7DB5;
  --maroon: #8B2232;
  --slate: #3F5A6B;
  --teen-ink: #23202B;
  --cream: #FFF8D6;

  /* type */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --font-teen: 'Lilita One', 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;

  /* shape */
  --radius: 0;
  --radius-teen: 999px;
  --radius-teen-card: 24px;
  --shadow-hard: 5px 5px 0 var(--pink);
  --shadow-hard-hover: 8px 8px 0 var(--pink);
  --outline: 3px solid var(--focus);
  --outline-offset: 4px;
}

/* ================= extended tokens (design pack) =================
   Fluid type: each role is the value drawn in the 390px comp (min) and the 1440px comp (max),
   interpolated linearly between 390 and 1440 viewport width. Line heights are unitless.
   Display type is Bebas Neue and normally uppercase; body is Atkinson Hyperlegible.
   ================================================================ */
:root {
  --fs-hero: clamp(112px, calc(75.60px + 9.333vw), 210px);  /* 112 to 210px. Home hero wordmark, "Blurred Lines" */
  --lh-hero: .84;
  --fs-draw: clamp(104px, calc(72.06px + 8.190vw), 190px);  /* 104 to 190px. "Draw a card" title */
  --lh-draw: .85;
  --fs-title-xl: clamp(84px, calc(59.49px + 6.286vw), 150px);  /* 84 to 150px. "How to play" and other biggest section titles */
  --lh-title-xl: .85;
  --fs-title-l: clamp(76px, calc(55.94px + 5.143vw), 130px);  /* 76 to 130px. "Seven categories" */
  --lh-title-l: .85;
  --fs-title-faq: clamp(84px, calc(76.57px + 1.905vw), 104px);  /* 84 to 104px. "Questions" */
  --lh-title-faq: .85;
  --fs-title-m: clamp(72px, calc(64.57px + 1.905vw), 92px);  /* 72 to 92px. "Expansion sets" */
  --lh-title-m: .88;
  --fs-band: clamp(56px, calc(31.49px + 6.286vw), 122px);  /* 56 to 122px. Final band statement, "Cross the line. Bring your friends." */
  --lh-band: .84;
  --fs-timer: clamp(110px, calc(95.14px + 3.810vw), 150px);  /* 110 to 150px. The 3:00 in step 3 */
  --lh-timer: .9;
  --fs-pitch: clamp(46px, calc(34.86px + 2.857vw), 76px);  /* 46 to 76px. Pitch paragraph (Bebas, uppercase, highlighted phrases) */
  --lh-pitch: .98;
  --fs-step: clamp(44px, calc(40.29px + 0.952vw), 54px);  /* 44 to 54px. Step titles, "Read the scenario" */
  --lh-step: .95;
  --fs-stat-num: clamp(64px, calc(56.57px + 1.905vw), 84px);  /* 64 to 84px. Box breakdown numerals 420 / 20 / 2 */
  --lh-stat-num: .9;
  --fs-stat: clamp(38px, calc(31.31px + 1.714vw), 56px);  /* 38 to 56px. Stat strip values */
  --lh-stat: .95;
  --fs-band-sub: clamp(38px, calc(35.03px + 0.762vw), 46px);  /* 38 to 46px. "Be first to back it" heading inside the form band */
  --lh-band-sub: .98;
  --fs-tag: clamp(24px, calc(20.29px + 0.952vw), 34px);  /* 24 to 34px. Black tagline box */
  --lh-tag: 1.08;
  --fs-label: clamp(26px, calc(24.51px + 0.381vw), 30px);  /* 26 to 30px. Category and set labels */
  --lh-label: 1;
  --fs-btn: 26px;  /* 26 to 26px. Button text */
  --lh-btn: 1;
  --fs-eyebrow: clamp(18px, calc(16.51px + 0.381vw), 22px);  /* 18 to 22px. Eyebrow labels */
  --lh-eyebrow: 1;
  --fs-lead: clamp(19px, calc(16.40px + 0.667vw), 26px);  /* 19 to 26px. Intro under a title */
  --lh-lead: 1.45;
  --fs-body-l: clamp(19px, calc(16.77px + 0.571vw), 25px);  /* 19 to 25px. Pitch support copy */
  --lh-body-l: 1.5;
  --fs-body: clamp(18px, calc(17.26px + 0.190vw), 20px);  /* 18 to 20px. Default body */
  --lh-body: 1.5;
  --fs-body-s: clamp(16px, calc(15.26px + 0.190vw), 18px);  /* 16 to 18px. Small body */
  --lh-body-s: 1.5;
  --fs-small: 16px;  /* 16 to 16px. Trust line, captions, field labels */
  --lh-small: 1.45;
  --fs-faq-q: clamp(20px, calc(18.14px + 0.476vw), 25px);  /* 20 to 25px. FAQ question (bold) */
  --lh-faq-q: 1.3;
  --fs-faq-a: clamp(18px, calc(16.89px + 0.286vw), 21px);  /* 18 to 21px. FAQ answer */
  --lh-faq-a: 1.55;

  /* letter-spacing */
  --ls-display: 0.005em;
  --ls-label: 0.03em;
  --ls-btn: 0.05em;
  --ls-eyebrow: 0.08em;

  /* spacing (4px base) */
  --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;

  /* layout */
  --container: 1280px;
  --gutter: 20px;              /* 390 comp. 80px at 1440. See @media below */
  --nav-h: 64px;               /* 88px from 768 up */
  --section-y: 64px;           /* vertical padding of a band: ~64 mobile, 100-130 desktop */
  --border: 3px;               /* adult controls, cards, tags */
  --border-teen: 2px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --nav-h: 88px; --section-y: 96px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 80px; --section-y: 120px; }
}

/* breakpoints used by the comps: 360 (minimum), 390 (mobile comp), 768 (tablet: layout switch), 1200 (desktop), 1440 (desktop comp) */