/* ============ DESIGN TOKENS — DRUK (print editorial / riso) ============
   Papier cream + 3 farby risograficzne z etykiety. Overprinty policzone
   jako multiply nad papierem (zgodne z tools/separate-plates).
   ======================================================================= */

:root {
  /* ---------- Farby ---------- */
  --pink: #FF1F8F;
  --yellow: #FFC93C;
  --navy: #1B1346;
  --cream: #FFF7E6;

  /* Overprinty (multiply) */
  --orange: #FF6B35;          /* ~pink × yellow */
  --violet: #4A1458;          /* ~pink × navy */
  --ink: #1B1346;             /* tekst = navy */

  --ink-soft: rgba(27, 19, 70, .78);
  --ink-mute: rgba(27, 19, 70, .55);
  --ink-faint: rgba(27, 19, 70, .18);
  --cream-soft: rgba(255, 247, 230, .8);
  --cream-mute: rgba(255, 247, 230, .55);

  /* ---------- Ziarno papieru (SVG feTurbulence) ---------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- 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(40px, 5.6vw, 88px);
  --fs-display: clamp(32px, 4.6vw, 68px);
  --fs-lead: clamp(17px, 1.6vw, 20px);
  --fs-body: 16px;
  --fs-mono: 12px;

  /* ---------- Layout ---------- */
  --gutter: clamp(16px, 3.5vw, 56px);
  --block-pad: clamp(72px, 9vw, 132px);

  /* ---------- Rules ---------- */
  --rule: 1px solid;
  --rule-bold: 2px solid;

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

  /* ---------- Z ---------- */
  --z-nav: 100;
  --z-loader: 500;
}