/* 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 liter „Agri" i liścia w logoeko.png (odcień ok. 108°, pełne nasycenie
     jak w znaku; środek zieleni w logo to #185b07, refleksy #4e9d1a). */
  --eko-green-800: #124806; /* wciśnięty przycisk — 10.74:1 z białym */
  --eko-green-700: #185b07; /* GŁÓWNY = kolor liter „Agri": mainnav, Szukaj, Kategorie
                               sprzętu, słuchawka, przyciski — 8.27:1 z białym */
  --eko-green-600: #206c0b; /* hover, stan aktywny — 6.54:1 */
  --eko-green-500: #3a9a1c; /* kreski, obramowania — 3.61:1, tylko elementy nietekstowe */
  --eko-green-400: #5cb82a; /* akcent jak refleks na liściu; NIGDY pod biały tekst — 2.52:1 */
  --eko-green-50: #eef6e8;

  /* Grafit — z metalu „Eko" i strzałki w logo: szarość NEUTRALNA, bez zielonego odcienia
     (metal w logo to #222221–#939393). Zieleń wyróżnia się na niej tak jak w znaku. */
  --eko-graphite-900: #1c1c1c;
  --eko-graphite-800: #262626;
  --eko-graphite-600: #4a4a4a;

  --eko-gray-500: #6b6b6b;
  --eko-gray-300: #d4d4d4; /* linie, które mają być widoczne: tabele, podziały w sidebarze */
  --eko-gray-200: #e6e6e6;
  --eko-gray-100: #f5f5f5;
  --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: #d6eac8; /* obramowanie bloków na tle green-50 */
  --eko-on-dark: #d9d9d9; /* tekst drugoplanowy na graficie: pasek górny, stopka — 10.7:1 */
  --eko-line-dark: #3a3a3a; /* 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(24 91 7 / 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 — WYŁĄCZNIE panel administratora. Strona publiczna ma ostre rogi (decyzja
     właściciela 2026-10-01, zasada na górze public.css), a „--eko-radius-lg" (karty, sidebar,
     slider) zniknął razem z nimi, bo nikt już po niego nie sięgał. */
  --eko-radius-sm: 4px; /* panel: pola formularzy, plakietki, miniatury */
  --eko-radius-md: 8px; /* panel: przyciski, karty, podgląd */

  /* 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(28, 28, 28, 0.1);
  --eko-shadow-lg: 0 12px 32px rgba(28, 28, 28, 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;
  }
}