:root {
    /* --- Paleta --- */
    --primary-color: #006400;
    /* Baza Głębokiej Zieleni */
    --primary-gradient: linear-gradient(135deg, #006400 0%, #004d00 100%);
    --sidebar-gradient: linear-gradient(160deg, #005c00 0%, #003300 100%);
    /* F4.15 (2026-07-23): stan hover przycisków brandowych — token zamiast
       hardkodowanych #0a7a0a (light) / #22c55e (dark) w dashboard.css */
    --primary-hover: #0a7a0a;

    --secondary-color: #f8f9fa;
    /* Miększe białe/szare tło */
    --surface-color: #ffffff;
    --bg-color: #f5f5f5;

    --text-color: #2c3e50;
    --text-muted: #6c757d;

    --accent-light: #e6ffe6;
    /* Jasnozielony odcień dla stanów aktywnych */
    --accent-border: #c3e6cb;

    /* --- Kolory kart/boxów --- */
    --card-bg: #edf7ed;
    --card-border: #e9ecef;
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;

    /* --- Typografia --- */
    --font-main: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* --- Układ --- */
    --sidebar-width: 260px;
    /* Nieco szerszy dla nowoczesnego odczucia */
    --header-height: 70px;
    /* Bardziej przewiewny */

    /* --- Efekty --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Miękki cień */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Cień karty */
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Cień najechania/modalu */

    --radius-sm: 8px;
    --radius-md: 16px;
    /* Nowoczesne zaokrąglone rogi */
    --radius-lg: 24px;

    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Skala z-index (F4.22, 2026-07-23) — jedna semantyczna drabina zamiast
       licytacji ad hoc (90/100 → 999/1000 → 9999/10000 → 20000 → 100000).
       Wartości zachowują dotychczasową kolejność warstw (bez zmian wizualnych).
       W JS inline stosować z fallbackiem: z-index:var(--z-modal, 9999) — strony
       standalone bywają renderowane bez variables.css. Dark mode nie zmienia z-index. --- */
    --z-raised: 10;            /* lokalne wypiętrzenie (etykiety, przyciski w popupie) */
    --z-sidebar: 90;          /* sidebar desktop */
    --z-header: 100;          /* nagłówek aplikacji */
    --z-overlay: 999;         /* dimmer za szufladą (mobile) */
    --z-drawer: 1000;         /* szuflada mobilna + overlay modali 1000-tier + sticky close */
    --z-modal: 9999;          /* modale bazowe / panel admina */
    --z-modal-raised: 10000;  /* modal nad modalem (popup instalacji, benchmark) */
    --z-modal-detail: 20000;  /* detale silnika (nad listą modali) */
    --z-modal-top: 100000;    /* modale najwyższe (kumulacja globalna, słupek miesiąca) */

    /* --- Tokeny alertów (F4.16, 2026-07-23) — semantyczne kolory kart alarmów;
       używane w popupie alarmów (index.php) i docelowo we wszystkich kartach
       stanów. Dark mode nadpisuje niżej — inline hexy w JS zastąpione var(). --- */
    --alert-error-bg: #fee2e2;
    --alert-error-bg2: #fef2f2;
    --alert-error-border: #dc3545;
    --alert-error-ink: #991b1b;
    --alert-error-ink2: #b91c1c;
    --alert-warn-bg: #fff3cd;
    --alert-warn-border: #ffc107;
    --alert-warn-ink: #92400e;
    --alert-info-bg: #dbeafe;
    --alert-info-border: #3b82f6;
    --alert-info-ink: #1e40af;
    --alert-card-ink: #1f2937;
    --alert-card-ink2: #4b5563;
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
    /* --- Paleta Dark --- */
    --primary-color: #4ade80;
    --primary-gradient: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    --sidebar-gradient: linear-gradient(160deg, #1a2e1a 0%, #0d1a0d 100%);
    /* F4.15: hover przycisków brandowych w dark (jaśniejsza zieleń) */
    --primary-hover: #22c55e;

    --secondary-color: #171717;
    --surface-color: #0d0d0d;
    --bg-color: #0a0a0a;

    --text-color: #f5f5f5;
    --text-muted: #a8a8a8;
    --text-dark: #e0e0e0;

    --accent-light: #1f2e1f;
    --accent-border: #2d4a2d;

    /* --- Kolory kart/boxów Dark --- */
    --card-bg: #1a1a1a;
    --card-border: #2a2a2a;
    --header-bg: #141414;
    --input-bg: #252525;
    --input-border: #3a3a3a;

    /* --- Dodatkowe kolory dla kontrastowych elementów --- */
    --table-header-bg: #222222;
    --table-row-hover: #252525;
    --button-text: #f5f5f5;
    --link-color: #4ade80;

    /* --- Efekty Dark --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    /* --- Tokeny alertów Dark (F4.16) — przyciemnione tła, rozjaśnione tusze;
       kontrast tuszu na tle ≥4.5:1 --- */
    --alert-error-bg: #3b1216;
    --alert-error-bg2: #2a0e11;
    --alert-error-border: #ef4444;
    --alert-error-ink: #fca5a5;
    --alert-error-ink2: #f87171;
    --alert-warn-bg: #3a2e0a;
    --alert-warn-border: #f59e0b;
    --alert-warn-ink: #fcd34d;
    --alert-info-bg: #16233f;
    --alert-info-border: #60a5fa;
    --alert-info-ink: #93c5fd;
    --alert-card-ink: #f3f4f6;
    --alert-card-ink2: #cbd5e1;
}

/* F4.11 (2026-07-23): USUNIĘTY blok @media (prefers-color-scheme: dark).
   Definiował DRUGĄ, konkurencyjną paletę dark (--primary #00a000, card #1e1e1e)
   o wyższej specyficzności niż [data-theme="dark"] (#4ade80, #1a1a1a) — user
   z ciemnym OS dostawał inny zielony niż z jasnym. JS w index.php ZAWSZE ustawia
   data-theme przy starcie (localStorage gf_theme albo prefers-color-scheme),
   więc [data-theme="dark"] wyżej jest JEDYNYM źródłem prawdy o palecie dark. */