/* Tokeny z docs/design-tokens.md. Kontrasty są tam policzone — nie zmieniaj kolorów tekstu
   bez sprawdzenia, czy nadal mieszczą się w 4.5:1.

   To JEDYNY blok „:root" w całym projekcie. Zmienna użyta w public.css albo admin.css,
   a nieobecna tutaj, NIE jest błędem, który widać: zgodnie ze specyfikacją deklaracja
   z nierozwiązanym „var()" jest nieprawidłowa na etapie wyliczania wartości i przyjmuje
   wartość POCZĄTKOWĄ własności — nie wartość z wcześniejszej reguły. Kosztowało to cały
   układ strony publicznej: brakowało „--eko-container", „--eko-gutter" i „--eko-sidebar",
   więc „grid-template-columns: var(--eko-sidebar) 1fr" wychodziło jako „none" (kategorie
   na całą szerokość, treść pod nimi), „max-width" jako „none" (strona rozciągnięta na 1920 px),
   a „padding" jako zero (brak marginesów bocznych i rytmu pionowego). HTML wyglądał poprawnie,
   testy serwisów też. Pilnuje tego teraz CssTokensTests. */

:root {
  /* Kolory pól formularzy i pasków przewijania. Bez tego Chrome na Androidzie ma prawo
     wymusić własny ciemny motyw na stronie, która niczego nie deklaruje — a wtedy jasny
     serwis z zielenią z logo wyświetla się jako ciemny, i to tylko części odwiedzających. */
  color-scheme: light;

  /* Zieleń — z liścia i pola w logo */
  --eko-green-800: #24541c;
  --eko-green-700: #2e6b24; /* GŁÓWNY: nawigacja, przyciski — 6.47:1 z białym */
  --eko-green-600: #357a26; /* hover, stan aktywny — 5.30:1 */
  --eko-green-500: #3e8e29; /* nagłówki sekcji, obramowania — 4.11:1, tylko duży tekst */
  --eko-green-400: #6fbf3f; /* dekoracja; NIGDY pod biały tekst — 2.28:1 */
  --eko-green-50: #f1f8ec;

  /* Grafit — z liter w logo */
  --eko-graphite-900: #1f211f;
  --eko-graphite-800: #2b2e2b;
  --eko-graphite-600: #4a4f4a;

  --eko-gray-500: #6b716b;
  --eko-gray-300: #d3d8d3; /* linie, które mają być widoczne: tabele, podziały w sidebarze */
  --eko-gray-200: #e5e8e5;
  --eko-gray-100: #f5f6f5;
  --eko-white: #ffffff;

  --eko-danger: #b3261e;
  --eko-warning: #8a5a00;

  /* Tła i teksty komunikatów oraz powierzchnie ciemne. Wcześniej wpisane wprost w regułach
     — a kolor bez nazwy nie mówi, gdzie jeszcze go użyto i czego dotknie jego zmiana. */
  --eko-danger-bg: #fdf1f0;
  --eko-warning-bg: #fdf7e7;
  --eko-warning-text: #6b4d05;
  --eko-green-100: #dceccf; /* obramowanie bloków na tle green-50 */
  --eko-on-dark: #d7dad7; /* tekst drugoplanowy na graficie: pasek górny, stopka */
  --eko-line-dark: #3a3f3a; /* linie na ciemnym tle */

  /* ── Warstwa semantyczna ──────────────────────────────────────────────────
     Same aliasy nad paletą wyżej. Nowy arkusz sięga po nie, stary po nazwy z palety —
     obie drogi prowadzą do tej samej wartości, więc nie ma tu migracji do przeprowadzenia.
     Sens jest taki, że „--eko-color-border" mówi, PO CO się tego używa, a „--eko-gray-200"
     tylko jaki to odcień. */
  --eko-color-primary: var(--eko-green-700);
  --eko-color-primary-hover: var(--eko-green-600);
  --eko-color-text: var(--eko-graphite-900);
  --eko-color-text-muted: var(--eko-gray-500);
  --eko-color-border: var(--eko-gray-200);
  --eko-color-border-strong: var(--eko-gray-300);
  --eko-color-bg: var(--eko-gray-100);
  --eko-color-surface: var(--eko-white);

  /* Pierścień fokusu dla pól, które zastępują kontur obwódką (wyszukiwarka, formularze).
     Powtarzał się dosłownie w dwóch miejscach. */
  --eko-focus-ring: 0 0 0 3px rgb(46 107 36 / 16%);

  /* ── Zasada dla tej warstwy ───────────────────────────────────────────────
     Nowy kod sięga po nazwy semantyczne. Palety NIE przepisujemy wstecz i nie ma to być
     kiedyś „dokończone": „--eko-white" i „--eko-green-700" znaczą w tym arkuszu DWIE różne
     rzeczy naraz — raz powierzchnię, raz tekst na ciemnym tle — więc podmiana ich w ciemno
     na „--eko-color-surface" i „--eko-color-primary" przemalowałaby napisy na przyciskach.
     Przepisane zostały wyłącznie te, które mają jedno znaczenie: „--eko-gray-200"
     (wyłącznie obramowania) i „--eko-graphite-900" (wyłącznie tekst). */

  /* ── Siatka strony ────────────────────────────────────────────────────────
     Te trzy wartości rozstrzygają cały układ katalogu i do 2026-09-20 ich tu nie było.
     Wartości niżej zmieniają się w breakpointach na końcu pliku. */
  --eko-container: 1400px; /* maksymalna szerokość treści — bez tego strona rozlewa się na 1920 px */
  --eko-gutter: 16px; /* margines boczny, nigdy mniejszy */
  --eko-sidebar: 220px; /* kolumna kategorii; używana dopiero od 992 px */

  --eko-space-1: 4px;
  --eko-space-2: 8px;
  --eko-space-3: 12px;
  --eko-space-4: 16px;
  --eko-space-5: 24px;
  --eko-space-6: 32px;
  --eko-space-7: 48px;
  --eko-space-8: 64px;

  /* Promienie: profesjonalnie, nie obło. Wspólne z panelem — podniesienie ich widać
     także w /admin i tak ma być, bo to ta sama firma i ten sam zestaw tokenów. */
  --eko-radius-sm: 4px; /* pola formularzy, plakietki */
  --eko-radius-md: 8px; /* przyciski, wyszukiwarka */
  --eko-radius-lg: 12px; /* karty, sidebar, slider, panele */

  /* Cienie delikatne — strona z maszynami rolniczymi nie ma wyglądać jak aplikacja mobilna.
     Ciężar niosą obramowania, cień tylko podnosi element na hoverze.
     „--eko-shadow-sm" i „--eko-transition-lg" z pierwotnej specyfikacji wypadły: nic ich
     nie używało, a token, po który nikt nie sięga, kłamie o tym, czym jest system. */
  --eko-shadow-md: 0 6px 16px rgba(31, 33, 31, 0.1);
  --eko-shadow-lg: 0 12px 32px rgba(31, 33, 31, 0.14);

  /* „system-ui" przed nazwanymi krojami: na Windows 11 daje Segoe UI Variable, na macOS
     SF Pro. Własnego kroju nie hostujemy — polityka treści dopuszcza wyłącznie „font-src
     'self'", więc Google Fonts i tak odpada, a dwa pliki .woff2 to osobna decyzja (R02
     w docs/redesign-ui.md), nie porządkowanie stylów. */
  --eko-font: system-ui, "Segoe UI Variable Text", "Segoe UI", -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  --eko-transition: 150ms ease-out; /* hover, focus */
}

/* ── Siatka w breakpointach ─────────────────────────────────────────────────
   System z docs/design-tokens.md §4: 576 / 768 / 992 / 1200 / 1400. Nie dokładaj szóstego.

   Sidebar zwęża się na tabletach celowo: przy 992 px kolumna treści ma i tak tylko ~660 px,
   a każde 40 px zabrane menu to jedna karta produktu więcej w rzędzie. */

@media (min-width: 768px) {
  :root {
    --eko-gutter: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --eko-sidebar: 252px;
  }
}

@media (min-width: 1400px) {
  :root {
    --eko-gutter: 32px;
    --eko-sidebar: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}