/* ============================================================
   tokens.css — Comic / Superhero birthday build ("Hero Squad").
   Self-contained variation. Dark comic page, light comic panels,
   thick ink outlines, halftone, red+gold+yellow pops.
   Fonts WITH Cyrillic: Russo One (display), Rubik (body).
   Bangers used only for Latin onomatopoeia bursts (POW/BANG).
   Original comic styling + generic motifs (no official DC/Marvel art).
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Color ---- */
  --bg: #0e0e14;             /* page (near-black, cool) */
  --bg-2: #14141d;           /* alt section */
  --panel: #f7f1e1;          /* comic paper panel */
  --panel-ink: #16130c;      /* text on light panel */
  --panel-muted: #6a6049;    /* labels on panel */

  --ink: #f6f1e4;            /* text on dark bg */
  --ink-2: #cabfa6;          /* secondary on dark */
  --muted: #8a8068;          /* labels on dark */
  --line: #2a2a36;           /* hairline on dark */

  --red: #c8102e;            /* Iron Man crimson */
  --red-deep: #8f0a20;
  --gold: #e0a526;           /* gold */
  --yellow: #ffd23f;         /* bat-yellow accent */
  --outline: #0a0a0a;        /* thick comic ink outline */

  --accent: var(--gold);     /* generic accent alias */

  --btn-bg: #ffd23f;         /* primary action = yellow pop */
  --btn-on: #14110a;
  --btn-hover: #ffe07a;

  /* ---- Typography ---- */
  --font-display: "Russo One", "Arial Black", system-ui, sans-serif;  /* Cyrillic OK */
  --font-burst: "Bangers", "Russo One", cursive;                       /* Latin bursts */
  --font-body: "Rubik", system-ui, -apple-system, sans-serif;          /* Cyrillic OK */

  --fs-display: clamp(2.8rem, 1.2rem + 7vw, 6rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-label: 0.78rem;

  --lh-tight: 1.02;
  --lh-body: 1.6;
  --tracking-display: 0.01em;
  --tracking-label: 0.16em;
  --tracking-wide: 0.28em;

  /* ---- Layout ---- */
  --container: 820px;
  --container-wide: 1160px;
  --gutter: 22px;
  --section-space: clamp(4rem, 2.5rem + 8vw, 7rem);

  /* ---- Comic shape ---- */
  --radius: 14px;            /* slightly rounded comic panels */
  --ink-w: 3px;              /* outline thickness */
  --shadow-pop: 8px 8px 0 var(--outline);  /* offset comic shadow */

  /* ---- Halftone (dots) ---- */
  --halftone: radial-gradient(var(--outline) 1.4px, transparent 1.6px);
  --halftone-gold: radial-gradient(rgba(224,165,38,0.5) 1.4px, transparent 1.6px);

  /* ---- Comic-page backdrops (darkening scrim over per-section art) ---- */
  /* single tuning point: raise alpha if generated art is too busy/light */
  --scrim: linear-gradient(180deg, rgba(14,14,20,0.58), rgba(14,14,20,0.80));

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --reveal-duration: 700ms;
  --reveal-shift: 40px;  /* matches GSAP reveal y-offset in deco.js */
}