/* ==========================================================================
   SCENA MIMO STRACHU — DESIGN TOKENS
   Pojedyncze źródło prawdy dla kolorów, typografii, odstępów i cieni.
   Każdy nowy moduł (Akademia Sceny, Dla Biznesu, Sklep) korzysta z tych
   samych zmiennych — nie definiuj kolorów/rozmiarów lokalnie w komponentach.
   ========================================================================== */

:root {
  /* --- Kolor: czysta biel + soczyste, nasycone akcenty ---------------------- */
  /* Biel jako baza (nie krem/beż — trzymaj --c-bg-soft blisko neutralnego
     szarawego, nie żółtawego), przyjazny ciemny brąz jako tekst, cztery
     mocno nasycone barwy jako system akcentów (nie jeden kolor na całość). */
  --c-bg: #ffffff;
  --c-bg-soft: #f5f4f1;       /* naprzemienne sekcje — ledwie zauważalny odcień, NIE beż */
  --c-bg-raised: #ffffff;     /* karty, dropdown, pola formularzy */

  --c-ink: #000000;            /* czysta czerń na wyraźne życzenie (v2: dwukolorowa paleta) */
  --c-ink-dim: #4a4a4a;
  --c-ink-faint: #666666;      /* wciąż ≥4.5:1 na --c-bg — używana też na małym tekście */

  /* Koral/pomarańcz i fiolet USUNIĘTE z palety na wyraźne życzenie (kolejne
     wersje ich używały jako głównego akcentu) — zmienne --c-coral-*/--c-violet-*
     zostają zdefiniowane tylko jako martwy, nieużywany zapis w historii
     tokenów; NIC w components.css ani layout.css nie powinno się już do nich
     odwoływać. Mięta + żółty przejęły rolę dwóch głównych akcentów marki. */
  --c-coral-fill: #ff6b52;
  --c-coral-fill-hi: #ff8267;
  --c-coral: #d13d1f;
  --c-coral-hi: #a5381f;
  --c-coral-soft: #ffd9cc;

  --c-violet-fill: #9b6fd6;
  --c-violet-fill-hi: #b28ee0;
  --c-violet: #6432ad;
  --c-violet-hi: #4f2589;
  --c-violet-soft: #ddcef6;

  /* Dwa główne akcenty marki (v2) — mięta jako podstawowy (CTA, linki, aktywna
     nawigacja), żółty jako drugorzędny (highlighty, tagi, gradient). Ten sam
     wzorzec co wcześniej: "fill" dla dużych płaszczyzn (zawsze z --c-ink na
     wierzchu), zwykła/-text dla tekstu/ikon/obwódek (AA na --c-bg). */
  --c-mint-fill: #2ecc94;
  --c-mint-fill-hi: #29e0a3;
  --c-mint: #0f7a52;
  --c-mint-hi: #0b5c3e;
  --c-mint-soft: #b9f0d8;
  --c-mint-text: #0f7a52;

  --c-yellow: #ffc93c;
  --c-yellow-soft: #ffe9a8;
  --c-yellow-text: #8a6300;

  --c-sky: #2dd4bf;
  --c-sky-soft: #aeefe9;
  --c-sky-text: #0e6f65;

  /* Gradient „aurora" dla głównych CTA — teraz tylko mięta → żółty, bez
     fioletu/błękitu. Zawsze z --c-ink na wierzchu (patrz .btn--primary). */
  --gradient-aurora: linear-gradient(
    100deg,
    var(--c-mint-fill) 0%,
    var(--c-yellow) 100%
  );

  --c-accent: var(--c-mint);               /* tekst/ikony/obwódki/linki — alias */
  --c-accent-hi: var(--c-mint-hi);         /* hover/aktywny stan tekstu — alias */
  --c-accent-fill: var(--c-mint-fill);     /* tła przycisków/tagów — alias */
  --c-accent-fill-hi: var(--c-mint-fill-hi);

  --c-line: rgba(0, 0, 0, 0.12);
  --c-line-strong: rgba(0, 0, 0, 0.24);
  --c-overlay-scrim: rgba(0, 0, 0, 0.45);

  --c-success: #1d6e44;
  --c-success-soft: #e4f5ec;
  --c-error: #b8402f;
  --c-error-soft: #fbeae7;

  /* --- Typografia: max 2 kroje na całą stronę ----------------------------- */
  --font-display: "Outfit", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);
  --fs-h2: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  --fs-h4: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  --lh-tight: 1.18;
  --lh-heading: 1.2;
  --lh-body: 1.62;

  --tracking-label: 0.14em;

  /* --- Odstępy (skala 8px) ------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3rem, 2.4rem + 3vw, 5rem);
  --space-2xl: clamp(4.5rem, 3.4rem + 5.5vw, 8rem);
  --space-3xl: clamp(6rem, 4.5rem + 7.5vw, 11rem);

  /* --- Kształt: miękko i zaokrąglone wszędzie ------------------------------ */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- Cień: miękki, kolorowy, nigdy ciężki/czarny ------------------------- */
  --shadow-soft: 0 16px 36px -18px rgba(0, 0, 0, 0.18);
  --shadow-lifted: 0 24px 56px -20px rgba(0, 0, 0, 0.22);
  --shadow-accent-glow: 0 10px 24px -12px rgba(46, 204, 148, 0.35);

  /* --- Warstwy i czas ------------------------------------------------------ */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-nav: 120;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-reveal: 900ms;

  /* --- Kontener ------------------------------------------------------------ */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 0.8rem + 2vw, 3rem);

  /* --- Wysokość nagłówka (używana do offsetu kotwic i mobile nav) ---------- */
  --header-h: 84px;
}

/* Kodowanie kolorem 4 grup warsztatowych (patrz .category-card, kafle na
   /warsztaty/) — każda sekcja dopisuje sobie własny akcent, reszta systemu
   (przyciski, linki, fokus) zostaje na głównym --c-accent (mięta). Od v2
   (dwukolorowa paleta) cykl na 4 karty naprzemiennie miętowo-żółty:
   dzieci        → --c-yellow     / --c-yellow-soft / --c-yellow-text
   młodzież      → --c-mint-fill  / --c-mint-soft   / --c-mint-text
   dorośli       → --c-yellow     / --c-yellow-soft / --c-yellow-text
   nauczyciele   → --c-mint-fill  / --c-mint-soft   / --c-mint-text
   (--c-sky zostaje zdefiniowany, ale wypada z aktywnego użycia — jak
   fiolet/koral, to teraz martwy token w historii, nie kasujemy go na wypadek
   gdyby trzeba było wrócić) */

/* Rozbudowa modułowa (przygotowane, nieużywane w v1.0):
   --c-module-akademia i --c-module-biznes mogą nadpisać --c-accent lokalnie
   w obrębie sekcji (np. [data-module="akademia"] { --c-accent: ...; }),
   bez zmian w pozostałych tokenach. */