/*
 * Motywy strony. Tailwind v4 kompiluje kolory do var(--color-*), więc motyw
 * to po prostu nadpisanie zmiennych na <html data-theme="...">.
 * "default" = brak nadpisań (wygląd dotychczasowy).
 * Dodanie motywu: nowy blok html[data-theme="nazwa"] + wpis w ThemeSwitcher.js (THEMES).
 */

/* własne zmienne (używane przez komponenty spoza Tailwinda, np. baner cookies) */
:root {
    --ui-surface: #ffffff;
    --ui-text: #1f2937;
    --ui-border: #d1d5db;
    --ui-accent: #2563eb;
    --ui-accent-text: #ffffff;
    --ui-focus: #2563eb;
}

html[data-theme="contrast"] {
    --ui-surface: #ffffff;
    --ui-text: #000000;
    --ui-border: #000000;
    --ui-accent: #0000b8;
    --ui-accent-text: #ffffff;
    --ui-focus: #000000;

    --color-black: #000000;
    --color-white: #ffffff;

    /* szarości: tła rozjaśnione, tekst do czerni */
    --color-gray-50: #ffffff;
    --color-gray-100: #f2f2f2;
    --color-gray-200: #e6e6e6;
    --color-gray-300: #595959;
    --color-gray-400: #404040;
    --color-gray-500: #1a1a1a;
    --color-gray-600: #000000;
    --color-gray-700: #000000;
    --color-gray-800: #000000;
    --color-gray-900: #000000;
    --color-gray-950: #000000;
    --color-slate-50: #ffffff;
    --color-slate-100: #f2f2f2;
    --color-slate-300: #595959;
    --color-slate-400: #404040;
    --color-slate-500: #1a1a1a;
    --color-slate-600: #000000;
    --color-slate-700: #000000;
    --color-slate-900: #000000;

    /* niebieski: ciemniejszy (kontrast >= 7:1 na bieli) */
    --color-blue-50: #ffffff;
    --color-blue-100: #f0f4ff;
    --color-blue-200: #c7d4ff;
    --color-blue-300: #0000b8;
    --color-blue-400: #0000b8;
    --color-blue-500: #0000b8;
    --color-blue-600: #0000b8;
    --color-blue-700: #00008f;
    --color-blue-800: #000070;
    --color-blue-900: #000050;
    --color-blue-950: #000000;
    --color-indigo-600: #0000b8;
    --color-indigo-700: #00008f;
    --color-indigo-800: #000070;
    --color-indigo-900: #000050;
    --color-cyan-400: #006680;
    --color-cyan-500: #006680;
    --color-purple-500: #4b0082;
    --color-purple-600: #4b0082;
    --color-purple-800: #2e0050;

    /* statusy: ciemniejsze odcienie, jasne tła -> biel */
    --color-red-50: #ffffff;
    --color-red-400: #a30000;
    --color-red-500: #a30000;
    --color-red-600: #8a0000;
    --color-red-700: #700000;
    --color-green-50: #ffffff;
    --color-green-400: #00601f;
    --color-green-500: #00601f;
    --color-green-600: #004d19;
    --color-green-700: #003d14;
    --color-emerald-400: #00601f;
    --color-emerald-500: #00601f;
    --color-emerald-600: #004d19;
    --color-emerald-700: #003d14;
    --color-orange-500: #8a3b00;
    --color-orange-600: #7a3300;
    --color-orange-700: #662b00;
    --color-amber-500: #7a4b00;
    --color-amber-700: #5c3800;
    --color-yellow-600: #6b5200;
    --color-yellow-700: #594400;
}

html[data-theme="contrast"] body { background: #fff; color: #000; }

/* wyraźne obramowania */
html[data-theme="contrast"] [class*="border"] { border-color: #000 !important; }
html[data-theme="contrast"] footer,
html[data-theme="contrast"] footer * { border-color: #fff !important; }

/* stopka: czarne tło, biały tekst */
html[data-theme="contrast"] footer { background: #000; color: #fff; border-top: 3px solid #fff; }
html[data-theme="contrast"] footer [class*="text-gray"],
html[data-theme="contrast"] footer [class*="text-white"] { color: #fff !important; }
html[data-theme="contrast"] footer [class*="bg-gray"] { background: #000 !important; }

/* linki podkreślone, mocny fokus */
html[data-theme="contrast"] a { text-decoration: underline; }
html[data-theme="contrast"] a:has(img) { text-decoration: none; }
html[data-theme="contrast"] :focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}
html[data-theme="contrast"] footer :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px #000; }

/* bez półprzezroczystości/rozmycia, które obniżają kontrast */
html[data-theme="contrast"] [class*="/9"], html[data-theme="contrast"] [class*="/8"],
html[data-theme="contrast"] [class*="/7"] { opacity: 1; }
html[data-theme="contrast"] nav { background: #fff !important; backdrop-filter: none; border-bottom: 3px solid #000; }
html[data-theme="contrast"] .opacity-70, html[data-theme="contrast"] .opacity-80 { opacity: 1; }