/* AtLogic – tokeny jako zmienne CSS (generowane z tokens.json). Ładuj jako pierwsze. */
:root{
  --bg-950: #060b18; /* Najgłębszy granat: winieta w lewym dolnym rogu tła, pasek nawigacji na mobile. */
  --bg-900: #0a1326; /* Tło strony (ground). Na nim leży siatka grid-line i ścieżki obwodów. */
  --bg-800: #0f1b35; /* Dolna (cienista) część paneli i kontenerów. */
  --bg-700: #152548; /* Lico przycisków 3D (nawigacja, ikony, filtry). */
  --bg-600: #1d3260; /* Rozjaśniony prawy-górny róg lica przycisku i panelu – strona od światła. */
  --wall-1: #13213f; /* Ścianka bloku 3D tuż pod licem (lewo-dół). */
  --wall-2: #0b162d; /* Środek ścianki bloku 3D; też ścianka paneli. */
  --wall-3: #050b18; /* Najciemniejsza, dolna krawędź ścianki bloku. */
  --grid-line: #ffffff0d; /* Linie siatki 40 px i ścieżek obwodów w tle. Tylko dekoracja, nigdy treść. */
  --gold-100: #fff3cf; /* Blik złota – najjaśniejszy punkt gradientu złota (prawy górny róg). */
  --gold-300: #f0cf7a; /* Jasne złoto: ikony i napisy na przyciskach, ring fokusu. */
  --gold-500: #d4a648; /* Główne złoto: cienkie ramki paneli i obwoluty przycisków. */
  --gold-700: #9a7128; /* Złoto w cieniu: dolna-lewa część ramek, wyłączone kontrolki. */
  --gold-900: #5c4214; /* Najciemniejsze złoto: krawędź gradientu, rowki suwaków. */
  --laser: #ff7a1a; /* Pomarańczowy laser pod przyciskiem w stanie hover/aktywny. Tylko ten jeden sygnał interakcji. */
  --laser-glow: #ff7a1a80; /* Poświata lasera rozlana na tło pod przyciskiem. */
  --logo-at: #ff8a1f; /* Litery „At” w napisie logo AtLogic. */
  --ink: #f3f6fc; /* Cała treść: tekst, nagłówki paneli, wartości w tabelach. 15:1 na bg-800. */
  --ink-muted: #a3b3cf; /* Opisy, nagłówki kolumn, osie wykresów. 8:1 na bg-800. */
  --ink-faint: #7d90b3; /* Podpisy pomocnicze, nieaktywne pozycje. 4.9:1 na bg-800 – nie schodzić niżej. */
  --data-blue: #33c6ff; /* Seria 1 na wykresach; status Info. */
  --data-green: #2bf0a0; /* Seria 2; KPI rośnie dobrze, status OK. */
  --data-yellow: #ffd23f; /* Seria 3; ostrzeżenie, przychód/pieniądze. */
  --data-orange: #ff8a2a; /* Seria 4; w toku, uwaga. Nie mylić z laserem – laser to interakcja, ten kolor to dane. */
  --data-red: #ff4d6d; /* Seria 5; KPI spada źle, awaria, błąd. */
  --data-pink: #ff5fd2; /* Seria 6 – gdy trzeba rozróżnić więcej serii. */
  --data-violet: #9d7bff; /* Seria 7 – gdy trzeba rozróżnić więcej serii. */
  --data-blue-strong: #3b82f6; /* Paleta standardowa (klasyczne kolory dashboardów) – blue. Włącza ją data-al-palette="standard" na kontenerze. */
  --data-green-strong: #22c55e; /* Paleta standardowa (klasyczne kolory dashboardów) – green. Włącza ją data-al-palette="standard" na kontenerze. */
  --data-yellow-strong: #facc15; /* Paleta standardowa (klasyczne kolory dashboardów) – yellow. Włącza ją data-al-palette="standard" na kontenerze. */
  --data-orange-strong: #f97316; /* Paleta standardowa (klasyczne kolory dashboardów) – orange. Włącza ją data-al-palette="standard" na kontenerze. */
  --data-red-strong: #ef4444; /* Paleta standardowa (klasyczne kolory dashboardów) – red. Włącza ją data-al-palette="standard" na kontenerze. */
  --data-pink-strong: #ec4899; /* Paleta standardowa (klasyczne kolory dashboardów) – pink. Włącza ją data-al-palette="standard" na kontenerze. */
  --data-violet-strong: #8b5cf6; /* Paleta standardowa (klasyczne kolory dashboardów) – violet. Włącza ją data-al-palette="standard" na kontenerze. */
  --status-ok: var(--data-green); /* Stan OK / wartość lepsza niż cel. */
  --status-warn: var(--data-yellow); /* Ostrzeżenie. */
  --status-error: var(--data-red); /* Błąd, awaria, wartość gorsza niż cel. */
  --status-info: var(--data-blue); /* Informacja, neutralny trend. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-float: -8px 13px 18px rgba(0,0,0,0.55), -3px 5px 5px rgba(0,0,0,0.5);
  --shadow-lift: -12px 20px 26px rgba(0,0,0,0.6), -4px 7px 7px rgba(0,0,0,0.55);
  --shadow-panel: -12px 18px 34px rgba(0,0,0,0.55), -3px 5px 10px rgba(0,0,0,0.45);
  --shadow-pressed: inset -2px 3px 6px rgba(0,0,0,0.6);
  --shadow-laser: 0 0 8px 2px rgba(255,122,26,0.9), 0 0 24px 6px rgba(255,122,26,0.5);
  --nav-collapsed: 96px;
  --nav-expanded: 236px;
  --nav-button: 72px;
  --control-h: 44px;
  --gold-border: 1.5px;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: Barlow, "Segoe UI", system-ui, sans-serif;
}