/* ============ DESIGN TOKENS — KLATKI (cinematic image-sequence) ============
   Kino premium: ciemne studio, gradienty etykiety jako ŚWIATŁO (glow),
   letterbox, timecode mono. Zero WebGL — canvas 2D + gotowe klatki WebP.
   ========================================================================== */

:root {
  /* ---------- Color ---------- */
  --pink: #FF1F8F;
  --pink-deep: #E91E63;
  --orange: #FF6B35;
  --yellow: #FFC93C;
  --navy: #1B1346;
  --navy-night: #0D0826;
  --black: #05030F;
  --cream: #FFF7E6;
  --ink: #0D0826;

  --cream-soft: rgba(255, 247, 230, .78);
  --cream-mute: rgba(255, 247, 230, .5);
  --cream-faint: rgba(255, 247, 230, .22);
  --ink-soft: rgba(13, 8, 38, .75);
  --ink-mute: rgba(13, 8, 38, .55);

  /* ---------- Gradienty etykiety (brand) ---------- */
  --grad-sunrise: radial-gradient(circle at 30% 70%, #FFC93C 0%, #FF6B35 35%, #FF1F8F 75%, #E91E63 100%);
  --grad-ribbon: linear-gradient(90deg, #FFC93C 0%, #FF6B35 50%, #FF1F8F 100%);
  --grad-hot: linear-gradient(135deg, #FF1F8F 0%, #E91E63 55%, #FF6B35 110%);
  --grad-aurora: linear-gradient(180deg, #05030F 0%, #0D0826 30%, #1B1346 62%, #6B1A4E 95%, #E91E63 130%);
  --grad-night: linear-gradient(180deg, #05030F 0%, #0D0826 55%, #1B1346 100%);
  --grad-deep: linear-gradient(165deg, #1B1346 0%, #15103A 55%, #4A1458 95%, #E91E63 140%);
  --grad-cream: linear-gradient(180deg, #FFF7E6 0%, #FFEED1 55%, #FFDFAE 100%);

  /* Światło studyjne za butelką (glow, nie blok) */
  --glow-stage: radial-gradient(ellipse 62% 48% at 50% 54%,
      rgba(255, 31, 143, .34) 0%, rgba(255, 107, 53, .18) 38%,
      rgba(27, 19, 70, .0) 72%);
  --glow-buy: radial-gradient(ellipse 55% 45% at 50% 60%,
      rgba(255, 201, 60, .28) 0%, rgba(255, 107, 53, .16) 40%,
      rgba(5, 3, 15, 0) 75%);

  /* ---------- Rules ---------- */
  --rule: 1px solid;
  --rule-soft: 1px solid rgba(255, 247, 230, .16);

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-title: clamp(56px, 10.5vw, 168px);   /* karta tytułowa */
  --fs-ch: clamp(38px, 5.6vw, 86px);        /* tytuły rozdziałów */
  --fs-display: clamp(34px, 5vw, 76px);     /* nagłówki sekcji */
  --fs-quote: clamp(20px, 2.2vw, 30px);
  --fs-lead: clamp(17px, 1.6vw, 21px);
  --fs-body: 16px;
  --fs-mono: 12px;

  /* ---------- Layout ---------- */
  --gutter: clamp(16px, 3.5vw, 56px);
  --block-pad: clamp(72px, 9vw, 140px);
  --letterbox: clamp(18px, 3.2vh, 34px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  --ease-hard: cubic-bezier(.77, 0, .18, 1);
  --dur-snap: 160ms;

  /* ---------- Z ---------- */
  --z-glow: 1;
  --z-canvas: 2;
  --z-bars: 3;
  --z-chapters: 4;
  --z-hud: 5;
  --z-nav: 100;
  --z-loader: 500;
}