/* ==========================================================================
 nis2-tokens.css - jedyne źródło prawdy o warstwie wizualnej nis2.elev8.pl

   Ładowany PRZED stylami strony na każdej podstronie. Reguła: żaden plik
 nie zapisuje wartości koloru, odstępu, promienia ani cienia na sztywno -
 wszystko przez zmienną stąd.

   Układ dwuwarstwowy:
     1. PALETA  - surowe wartości, nazwane po kolorze i jasności.
     2. ROLE    - do czego danego koloru używamy. W kodzie stron sięgamy
 po role, nie po paletę.

   Zmiana wyglądu = zmiana warstwy ról w tym pliku. Nie edytuj hexów
 w plikach stron.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- PALETA */

  /* Teal - kolor prowadzący submarki NIS2.
     Nie jest to jeden odcień: skala niesie hierarchię (ciemny = stabilny,
 jasny = energia i gradienty). Wartości wzięte z tego, co już działa
 na landingu - nazwane, nie zmienione. */
  --teal-900: #12463a;
  --teal-800: #076e68;
  --teal-700: #0f766e;
  --teal-600: #087f78;
  --teal-550: #0a857a;
  --teal-500: #0a8f83;
  --teal-450: #0a9d90;
  --teal-400: #0aa89b;
  --teal-300: #12b3a3;
  --teal-100: #e2f7f2;
  --teal-050: #ecfbf8;

  /* Granat i błękit - tła ciemnych sekcji, tekst, akcent informacyjny. */
  --granat-900: #101820;
  /* Bylo #17223d do 09.08.2026: o jeden bit w kanale zielonym obok granatu
     z kanonu (kolory-elev8.json, podstawowe/navy oraz --atrament w marce).
     Roznicy nie widac na ekranie i wlasnie dlatego przetrwala: token niesie
     `--tekst`, wiec kolor CALEGO tekstu na stronach stojacych na tym pliku
     byl spoza kanonu. Kanon jest tu jednoznaczny, wiec to byla literowka,
     a nie decyzja. */
  --granat-800: #17233D;
  --granat-700: #17324a;
  --granat-600: #21415f;
  --blekit-500: #2f7198;
  --blekit-050: #edf7ff;

  /* Złoto i beże - ostrzeżenia, wyróżnienia, ciepłe tła i linie.
     UWAGA: specyfikacja wzorów NIS2 podaje złoto #d7a928, a landing od
 początku używa #e0b23a. Rozjazd opisany w tasks/TASK.md - do rozstrzygnięcia.
     Do czasu decyzji rolą złota jest --akcent-uwaga poniżej. */
  --zloto-700: #796019;
  --zloto-600: #7a5a00;
  --zloto-500: #e0b23a;
  --zloto-450: #d7a928;
  --bez-400: #d8c8ad;
  --bez-300: #ebe2d3;
  --bez-200: #fdf3d7;
  --bez-150: #fff3c8;
  --bez-100: #fff8e8;
  --bez-050: #fffaf0;
  --bez-025: #fffdf8;
  --brunat-600: #5a5346;

  /* Zieleń - potwierdzenia, stany pozytywne. */
  --zielen-500: #22a861;
  --zielen-450: #16a34a;
  --zielen-600: #506f5b;
  --zielen-050: #eaf9ef;

  /* Czerwień - TYLKO logo (znak „8") i stany błędu.
     Nie używać jako koloru akcji: to zastrzeżenie z kanonu marki. */
  --czerwien-600: #c8102e;
  --koral-500: #d85c45;
  --koral-050: #fff0ea;

  /* Fiolet - akcent uzupełniający, pojedyncze wyróżnienia. */
  --fiolet-600: #4b2e57;

  /* Neutralne. */
  --bialy: #ffffff;
  --szary-500: #6b7684;
  --szary-600: #53606e;
  --czarny: #000000;

  /* ------------------------------------------------------------------ ROLE */

  /* Powierzchnie */
  --tlo: var(--bialy);
  --tlo-cieple: var(--bez-100);
  --tlo-cieple-jasne: var(--bez-050);
  --tlo-karty: var(--bialy);
  --tlo-ciemne: var(--granat-700);
  --tlo-ciemne-2: var(--granat-600);

  /* Tekst */
  --tekst: var(--granat-800);
  --tekst-drugi: var(--szary-600);
  --tekst-meta: var(--szary-500);
  --tekst-na-ciemnym: var(--bialy);

  /* Linie */
  --linia: var(--bez-300);
  --linia-mocna: var(--bez-400);

  /* Akcja - to, w co użytkownik klika.
     Teal ma trzy poziomy: spoczynek, najechanie i jasny biegun gradientu. */
  --akcja: var(--teal-600);
  --akcja-hover: var(--teal-700);
  --akcja-jasna: var(--teal-300);
  --akcja-tlo: var(--teal-100);
  --akcja-tlo-jasne: var(--teal-050);
  --akcja-gradient: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-450) 100%);
  --akcja-gradient-hover: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-600) 100%);

  /* Gradienty dekoracyjne - paski i kreski akcentu.
     Prowadzą od chłodnego teala do ciepłego złota: to zmiana temperatury barwowej
 daje wrażenie ruchu. Gradient z teala w teal jest optycznie płaską plamą.
     Złoto jest w palecie submarki NIS2 (specyfikacja wzorów, punkt 5) - używamy go
 w dekoracji, nigdy w przyciskach: kolorem akcji zostaje teal. */
  --pasek-akcentu: linear-gradient(90deg, var(--teal-600) 0%, var(--teal-300) 46%, var(--zloto-500) 100%);
  --pasek-akcentu-krotki: linear-gradient(90deg, var(--teal-600) 0%, var(--zloto-500) 100%);
  --tlo-ciemne-gradient: linear-gradient(135deg, var(--granat-700) 0%, var(--teal-600) 66%, var(--zloto-450) 155%);
  --stopka-gradient: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 52%, var(--granat-700) 108%, var(--zloto-500) 165%);

  /* Akcenty pomocnicze - NIE są kolorami akcji, tylko oznaczeniem warstwy.
 uwaga  = termin, ryzyko, rzecz do pilnowania
 info   = wyjaśnienie, kontekst, materiał
 sukces = potwierdzenie, zrobione
 blad   = błąd formularza, stan negatywny */
  --akcent-uwaga: var(--zloto-500);
  --akcent-uwaga-tlo: var(--bez-150);
  --akcent-uwaga-tekst: var(--zloto-700);
  --akcent-info: var(--blekit-500);
  --akcent-info-tlo: var(--blekit-050);
  --akcent-sukces: var(--zielen-500);
  --akcent-sukces-tlo: var(--zielen-050);
  --akcent-blad: var(--koral-500);
  --akcent-blad-tlo: var(--koral-050);

  /* Marka - zastrzeżone, poza systemem akcji. */
  --marka-znak: var(--czerwien-600);

  /* ------------------------------------------------------------ GEOMETRIA */

  --promien: 8px;
  --promien-maly: 3px;
  --promien-duzy: 12px;
  --promien-pelny: 999px;

  --szerokosc-tresci: 1280px;
  --szerokosc-waska: 1080px;
  --szerokosc-czytania: 66ch;
  --margines-boczny: 40px;

  /* Rytm pionowy - jedna skala zamiast przypadkowych wartości. */
  --odstep-1: 4px;
  --odstep-2: 8px;
  --odstep-3: 12px;
  --odstep-4: 16px;
  --odstep-5: 24px;
  --odstep-6: 32px;
  --odstep-7: 44px;
  --odstep-8: 64px;
  --odstep-9: 92px;

  --sekcja-odstep: var(--odstep-8);
  --sekcja-odstep-duzy: var(--odstep-9);

  /* --------------------------------------------------------------- CIENIE */

  --cien-brak: none;
  --cien-lekki: 0 8px 28px rgba(16, 24, 32, 0.08);
  --cien-sredni: 0 14px 36px rgba(16, 24, 32, 0.07);
  --cien-mocny: 0 24px 70px rgba(16, 24, 32, 0.12);
  --cien-akcji: 0 12px 24px rgba(8, 127, 120, 0.20);
  --cien-akcji-mocny: 0 14px 28px rgba(8, 127, 120, 0.22);
  --pierscien-fokus: 0 0 0 3px rgba(15, 118, 110, 0.14);

  /* ----------------------------------------------------------- TYPOGRAFIA */

  --font-tekst: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Inter wyciety z serwisu 10.08.2026. Caly tekst i wszystkie naglowki
     ida teraz w Outfit; system-ui jako fallback dla przegladarek bez
     wczytanego fontu (np. crawler bez renderowania). */
  --font-naglowek: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marka: "Outfit", ui-sans-serif, system-ui, sans-serif;

  /* Skala typograficzna. Strony używają dziś 37 różnych rozmiarów, w tym
 półpikselowych - docelowo mają korzystać z tej skali. Wdrożenie
 stopniowe, bo zmienia wygląd; patrz tasks/TASK.md. */
  --tekst-xs: 12px;
  --tekst-s: 13px;
  --tekst-m: 14px;
  --tekst-l: 16px;
  --tekst-xl: 18px;
  --naglowek-s: 19px;
  --naglowek-m: 24px;
  --naglowek-l: clamp(25px, 3vw, 36px);
  --naglowek-xl: clamp(30px, 3.45vw, 40px);

  --wysokosc-linii: 1.6;
  --wysokosc-linii-naglowek: 1.14;

  /* --------------------------------------------------------------- RUCH */

  --czas-szybki: 140ms;
  --czas-sredni: 200ms;
  --krzywa: cubic-bezier(0.4, 0, 0.2, 1);
  --przejscie: var(--czas-szybki) ease;

  /* --------------------------------------------------------------- WARSTWY */

  --warstwa-topbar: 50;
  --warstwa-menu: 60;
  --warstwa-nad-wszystkim: 100;
}

/* Użytkownicy z ograniczonym ruchem: wyłączamy animacje globalnie,
 żeby każda strona nie musiała powtarzać tej reguły u siebie. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --czas-szybki: 0ms;
    --czas-sredni: 0ms;
  }
}