/* Tokeny strony TacticLab: jedyne miejsce z kolorami i czasami ruchu.
   Wartości barw jak w programie (E:/SZTABPRO/_projekt/src/css/02-tokeny.css, DESIGN.md):
   ciemny motyw, jeden zielony akcent, barwy klubu i kategorii tylko w danych. */
:root{
  --marka:"TacticLab";

  /* powierzchnie i tekst */
  --bg:#0E1013;
  --surface:#15181D;
  --surface-2:#1C2026;
  --surface-3:#23282F;
  --border:#272C35;
  --border-strong:#343A45;
  --text:#E8EAED;
  --text-2:#9AA3B2;
  --text-3:#828B9A;

  /* akcent (primary, fokus, stan aktywny, sukces) */
  --primary:#3ECF8E;
  --primary-hover:#56D99C;
  --on-primary:#0E1013;
  --primary-soft:rgba(62,207,142,.14);
  --primary-line:rgba(62,207,142,.32);
  --primary-glow:rgba(62,207,142,.22);

  /* semantyka */
  --warning:#E0A300;
  --danger:#E5484D;

  /* dane: barwy klubu i kategorii zdarzeń (jak w programie) */
  --club:#C8102E;
  --rival:#4FB3FF;
  --cat-pass:#7EE787;
  --cat-shot:#FFD24D;
  --cat-defense:#FF9F43;
  --cat-ours:#FF6B75;

  /* głębia: cień, światło, zasłony (tylko czerń i akcent z kryciem) */
  --cien-1:0 1px 2px rgba(0,0,0,.35);
  --cien-2:0 8px 24px rgba(0,0,0,.4);
  --cien-3:0 32px 80px rgba(0,0,0,.55);
  --cien-okno:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  --krawedz-swiatlo:rgba(255,255,255,.06);
  --swiatlo-hero:radial-gradient(60% 50% at 70% 30%,rgba(62,207,142,.10),transparent 70%);
  --swiatlo-karta:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(62,207,142,.22),transparent 65%);
  --zaslona:rgba(5,6,8,.72);
  --nav-tlo:rgba(14,16,19,.78);
  --przyciemnienie:rgba(0,0,0,.35);
  --czern:#000;
  --biel:#FFF;

  /* kino: nagranie na cały ekran, oś meczu, scena z oknem programu (ciemna warstwa na nagraniu liczona tak, by tekst miał kontrast 4,5:1) */
  --kino-zaslona:linear-gradient(180deg,rgba(14,16,19,.66) 0%,rgba(14,16,19,0) 20%),linear-gradient(90deg,rgba(14,16,19,.9) 0%,rgba(14,16,19,.72) 42%,rgba(14,16,19,0) 84%),linear-gradient(0deg,rgba(14,16,19,.95) 0%,rgba(14,16,19,.82) 30%,rgba(14,16,19,.34) 62%,rgba(14,16,19,0) 84%);
  --kino-zaslona-waski:linear-gradient(180deg,rgba(14,16,19,.7) 0%,rgba(14,16,19,0) 18%),linear-gradient(0deg,rgba(14,16,19,.96) 0%,rgba(14,16,19,.88) 46%,rgba(14,16,19,.5) 74%,rgba(14,16,19,.1) 100%);
  --kino-szklo:rgba(14,16,19,.55);
  --kino-krawedz:rgba(232,234,237,.4);
  --kino-os-linia:rgba(232,234,237,.3);
  --kino-os-tyk:rgba(232,234,237,.16);
  --kino-w:1360px;
  --kino-gutter:clamp(20px,4vw,56px);
  --kino-os-h:112px;

  /* kształty i miary */
  --r6:6px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;
  --w:1180px;
  --sekcja:clamp(72px,9vw,112px);
  --tap:44px;
  --nav-h:68px;
  --nav-h-mala:58px;

  /* ruch: czasy i krzywe */
  --t-1:150ms;
  --t-2:220ms;
  --t-3:420ms;
  --t-4:720ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.3,1.25,.35,1);
  --ease:var(--ease-out);
}

/* ograniczony ruch: wszystkie przejścia z tokenów --t-* trwają ułamek chwili (class selektor wygrywa z *, więc skracamy przez tokeny) */
@media(prefers-reduced-motion:reduce){
  :root{--t-1:1ms;--t-2:1ms;--t-3:1ms;--t-4:1ms}
}