/* ==========================================================================
   themes.css — wartości kolorów dla motywów.
   Domyślnie (bez atrybutu) obowiązuje motyw ciemny; theme.js ustawia
   <html data-theme="dark|light"> zanim przeglądarka narysuje stronę.
   Komponenty w style.css korzystają WYŁĄCZNIE z tych zmiennych.
   ========================================================================== */

/* Ciemny motyw: prawie czarne tło z zielonym podtonem, neonowa limonka („zielony kwas”). */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Tła i powierzchnie */
    --color-background: #040603;
    --color-background-alt: #080c04;
    --color-surface: rgb(14 20 8 / 0.76);
    --color-surface-solid: #0d1407;
    --color-surface-secondary: rgb(28 40 18 / 0.66);
    --color-surface-elevated: rgb(22 32 14 / 0.94);
    --color-surface-hover: rgb(44 64 24 / 0.7);
    --color-surface-glass: rgb(14 20 9 / 0.55);
    --color-overlay: rgb(3 5 2 / 0.76);

    /* Tekst */
    --color-text-primary: #f2ffe6;
    --color-text-secondary: #c3d4b3;
    --color-text-muted: #91a582;
    --color-text-inverse: #070a05;
    --color-text-on-primary: #0a1200;
    --color-heading: #ffffff;
    --color-link: #d4ff3a;
    --color-link-hover: #f2ff7a;

    /* Obramowania */
    --color-border: rgb(198 255 0 / 0.17);
    --color-border-strong: rgb(198 255 0 / 0.38);
    --color-divider: rgb(198 255 0 / 0.11);

    /* Marka w kontekście motywu */
    --color-primary: #c6ff00;
    --color-primary-hover: #d8ff3d;
    --color-primary-text: #d4ff1f;
    --color-secondary: #39ff14;
    --color-secondary-text: #6bff4a;
    --color-accent: #eeff00;
    --color-accent-text: #f2ff3d;
    --gradient-text: linear-gradient(100deg, #eeff00 0%, #c6ff00 40%, #39ff14 100%);
    --gradient-hero-bg:
        radial-gradient(60% 55% at 15% 20%, rgb(198 255 0 / 0.22), transparent 70%),
        radial-gradient(50% 50% at 85% 15%, rgb(57 255 20 / 0.2), transparent 70%),
        radial-gradient(55% 60% at 70% 90%, rgb(238 255 0 / 0.12), transparent 70%);
    --gradient-section: linear-gradient(180deg, transparent, rgb(198 255 0 / 0.05) 50%, transparent);

    /* Przyciski główne: jaskrawa limonka z CIEMNYM tekstem (kontrast > 12:1) */
    --gradient-cta: linear-gradient(120deg, #eeff00 0%, #c6ff00 50%, #39ff14 100%);
    --gradient-cta-hover: linear-gradient(120deg, #f6ff5c 0%, #d8ff3d 50%, #5cff3d 100%);
    --color-on-cta: #050800;

    /* Statusy — zawsze z ikoną i tekstem; „sukces” ma inny odcień zieleni niż marka */
    --color-success: #2dd4bf;
    --color-success-bg: rgb(45 212 191 / 0.14);
    --color-success-text: #5eead4;
    --color-warning: #fbbf24;
    --color-warning-bg: rgb(251 191 36 / 0.14);
    --color-warning-text: #fcd34d;
    --color-danger: #f87171;
    --color-danger-bg: rgb(248 113 113 / 0.14);
    --color-danger-text: #fca5a5;
    --color-info: #38bdf8;
    --color-info-bg: rgb(56 189 248 / 0.14);
    --color-info-text: #7dd3fc;
    --color-neutral-bg: rgb(160 180 150 / 0.16);
    --color-neutral-text: #d6e2cc;

    /* Cienie i poświaty */
    --color-shadow: rgb(0 0 0 / 0.6);
    --color-glow: rgb(198 255 0 / 0.55);
    --color-glow-secondary: rgb(57 255 20 / 0.45);
    --color-glow-accent: rgb(238 255 0 / 0.42);
    --glow-strength: 1;
    --shadow-sm: 0 2px 8px var(--color-shadow);
    --shadow-md: 0 10px 30px -8px var(--color-shadow);
    --shadow-lg: 0 24px 60px -16px var(--color-shadow);
    --shadow-glow: 0 0 0 1px rgb(198 255 0 / 0.35), 0 0 28px -4px var(--color-glow);
    --shadow-glow-strong: 0 0 0 1px rgb(198 255 0 / 0.6), 0 0 42px -2px var(--color-glow), 0 0 80px -20px var(--color-glow-secondary);

    /* Formularze */
    --input-background: rgb(8 12 5 / 0.72);
    --input-background-focus: rgb(13 19 8 / 0.92);
    --input-border: rgb(190 255 90 / 0.28);
    --input-border-hover: rgb(190 255 90 / 0.5);
    --input-placeholder: #7f9270;
    --input-disabled-background: rgb(34 46 24 / 0.5);
    --input-disabled-text: #6f8063;

    /* Tabele */
    --table-header-background: rgb(30 48 14 / 0.88);
    --table-header-text: #ecffd6;
    --table-row-background: rgb(14 20 9 / 0.45);
    --table-row-alt-background: rgb(22 30 14 / 0.45);
    --table-row-hover: rgb(198 255 0 / 0.1);

    /* Modale, menu, toasty */
    --modal-background: rgb(14 20 9 / 0.97);
    --drawer-background: rgb(8 12 5 / 0.97);
    --header-background: rgb(7 10 5 / 0.35);
    --header-background-scrolled: rgb(7 10 5 / 0.85);
    --toast-background: rgb(18 26 12 / 0.97);

    /* Elementy dekoracyjne */
    --grid-line: rgb(198 255 0 / 0.08);
    --skeleton-base: rgb(190 255 90 / 0.07);
    --skeleton-shine: rgb(190 255 90 / 0.16);
    --scrollbar-track: #0b1008;
    --scrollbar-thumb: #2f4718;

    /* Focus — biały pierścień, czytelny obok limonkowych elementów */
    --focus-ring-color: #ffffff;
    --selection-background: rgb(198 255 0 / 0.9);
    --selection-text: #070a05;
}

/* Jasny motyw: jasne tło z zielonym odcieniem; limonka przyciemniona, by zachować kontrast. */
:root[data-theme="light"] {
    color-scheme: light;

    --color-background: #f6fbef;
    --color-background-alt: #edf6e1;
    --color-surface: rgb(255 255 255 / 0.88);
    --color-surface-solid: #ffffff;
    --color-surface-secondary: rgb(241 248 230 / 0.92);
    --color-surface-elevated: rgb(255 255 255 / 0.97);
    --color-surface-hover: rgb(230 244 208 / 0.95);
    --color-surface-glass: rgb(255 255 255 / 0.66);
    --color-overlay: rgb(12 20 5 / 0.45);

    --color-text-primary: #10180a;
    --color-text-secondary: #3f5230;
    --color-text-muted: #56684a;
    --color-text-inverse: #ffffff;
    --color-text-on-primary: #ffffff;
    --color-heading: #0b1206;
    --color-link: #2f7000;
    --color-link-hover: #234a00;

    --color-border: rgb(60 100 20 / 0.16);
    --color-border-strong: rgb(60 100 20 / 0.32);
    --color-divider: rgb(60 100 20 / 0.1);

    --color-primary: #3d8c00;
    --color-primary-hover: #326600;
    --color-primary-text: #2f7000;
    --color-secondary: #1f7a1f;
    --color-secondary-text: #1a661a;
    --color-accent: #6b8f00;
    --color-accent-text: #4a6300;
    --gradient-text: linear-gradient(100deg, #4f9a00 0%, #2a8a10 50%, #5c8500 100%);
    --gradient-hero-bg:
        radial-gradient(60% 55% at 15% 20%, rgb(163 255 18 / 0.22), transparent 70%),
        radial-gradient(50% 50% at 85% 15%, rgb(57 255 20 / 0.12), transparent 70%),
        radial-gradient(55% 60% at 70% 90%, rgb(228 255 26 / 0.18), transparent 70%);
    --gradient-section: linear-gradient(180deg, transparent, rgb(100 170 20 / 0.05) 50%, transparent);

    /* Na jasnym tle przyciski są ciemnozielone z białym tekstem (kontrast ≥ 5:1) */
    --gradient-cta: linear-gradient(120deg, #3d8c00 0%, #2c6e00 50%, #127a2a 100%);
    --gradient-cta-hover: linear-gradient(120deg, #346a00 0%, #285200 55%, #135724 100%);
    --color-on-cta: #ffffff;

    --color-success: #0f766e;
    --color-success-bg: #ccfbf1;
    --color-success-text: #115e59;
    --color-warning: #b45309;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #854d0e;
    --color-danger: #dc2626;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #991b1b;
    --color-info: #0369a1;
    --color-info-bg: #e0f2fe;
    --color-info-text: #075985;
    --color-neutral-bg: #e8eee1;
    --color-neutral-text: #39472f;

    --color-shadow: rgb(30 50 10 / 0.14);
    --color-glow: rgb(120 210 0 / 0.3);
    --color-glow-secondary: rgb(40 160 20 / 0.16);
    --color-glow-accent: rgb(160 190 0 / 0.16);
    --glow-strength: 0.55;
    --shadow-sm: 0 1px 3px var(--color-shadow);
    --shadow-md: 0 8px 24px -10px var(--color-shadow);
    --shadow-lg: 0 20px 48px -18px rgb(30 50 10 / 0.24);
    --shadow-glow: 0 0 0 1px rgb(63 125 0 / 0.18), 0 10px 26px -12px rgb(63 125 0 / 0.38);
    --shadow-glow-strong: 0 0 0 1px rgb(63 125 0 / 0.28), 0 16px 40px -14px rgb(63 125 0 / 0.45);

    --input-background: #ffffff;
    --input-background-focus: #ffffff;
    --input-border: #a9c290;
    --input-border-hover: #789a58;
    --input-placeholder: #697b5b;
    --input-disabled-background: #eef3e7;
    --input-disabled-text: #7a8a6e;

    --table-header-background: #e3f3cc;
    --table-header-text: #1c3008;
    --table-row-background: #ffffff;
    --table-row-alt-background: #f7fbf1;
    --table-row-hover: #eef8de;

    --modal-background: #ffffff;
    --drawer-background: rgb(255 255 255 / 0.98);
    --header-background: rgb(246 251 239 / 0.55);
    --header-background-scrolled: rgb(255 255 255 / 0.9);
    --toast-background: #ffffff;

    --grid-line: rgb(60 100 20 / 0.06);
    --skeleton-base: #e6eedc;
    --skeleton-shine: #f4f8ee;
    --scrollbar-track: #edf4e3;
    --scrollbar-thumb: #b5cc98;

    --focus-ring-color: #1d4ed8;
    --spot-rgb: 80 170 0;
    --selection-background: rgb(198 255 0 / 0.65);
    --selection-text: #0b1206;
}

::selection {
    background: var(--selection-background);
    color: var(--selection-text);
}

html {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Płynna, krótka zmiana kolorów wyłącznie podczas przełączania motywu.
   Klasę dodaje theme.js na ~350 ms. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition:
        background-color 300ms var(--ease-standard),
        border-color 300ms var(--ease-standard),
        color 300ms var(--ease-standard),
        fill 300ms var(--ease-standard),
        stroke 300ms var(--ease-standard),
        box-shadow 300ms var(--ease-standard) !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transition,
    html.theme-transition *,
    html.theme-transition *::before,
    html.theme-transition *::after {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    :root {
        --focus-ring-color: Highlight;
    }
}