/*
 * Dizajnové tokeny — jediný zdroj farieb, odstupov, písma, rádiusov a tieňov.
 *
 * Hodnoty palety a škál sú z oficiálneho Tailwind CSS v4 (theme.css).
 * Tailwind sa neinštaluje ani nenačítava z CDN — preberajú sa len jeho hodnoty.
 *
 * Komponenty používajú výhradne tokeny podľa ROLY (--surface, --accent…),
 * nikdy priamo paletu. Tmavý režim tak mení len túto vrstvu.
 */

:root {
    color-scheme: light;

    /* --- paleta (Tailwind v4) --- */
    --zinc-50: oklch(98.5% 0 0);
    --zinc-100: oklch(96.7% 0.001 286.375);
    --zinc-200: oklch(92% 0.004 286.32);
    --zinc-300: oklch(87.1% 0.006 286.286);
    --zinc-400: oklch(70.5% 0.015 286.067);
    --zinc-500: oklch(55.2% 0.016 285.938);
    --zinc-600: oklch(44.2% 0.017 285.786);
    --zinc-700: oklch(37% 0.013 285.805);
    --zinc-800: oklch(27.4% 0.006 286.033);
    --zinc-900: oklch(21% 0.006 285.885);
    --zinc-950: oklch(14.1% 0.005 285.823);

    /* Zelená značky #94c021 (lime-400). Ostatné stupne majú jej odtieň, svetlosť zodpovedá úlohe stupňa. */
    --lime-100: oklch(96.5% 0.055 118.5);
    --lime-300: oklch(83.5% 0.165 122.8);
    --lime-400: oklch(74.9% 0.179 125.02);
    --lime-500: oklch(67.6% 0.172 127);
    --lime-700: oklch(49.5% 0.12 127.8);
    --lime-800: oklch(43.5% 0.097 127.1);
    --lime-950: oklch(26% 0.058 128.3);
    /* Limetková pre grafy — tie isté hodnoty ako lime-700 a lime-400, ale farba značky z Nastavení ich neprepíše.
       Farby grafu sú kategórie dát: pri modrej značke by sa náklady zliali s modrou tokenov. */
    --chart-lime-700: oklch(49.5% 0.12 127.8);
    --chart-lime-400: oklch(74.9% 0.179 125.02);

    --red-50: oklch(97.1% 0.013 17.38);
    --red-200: oklch(88.5% 0.062 18.334);
    --red-300: oklch(80.8% 0.114 19.571);
    --red-700: oklch(50.5% 0.213 27.518);
    --red-950: oklch(25.8% 0.092 26.042);

    --amber-50: oklch(98.7% 0.022 95.277);
    --amber-200: oklch(92.4% 0.12 95.746);
    --amber-300: oklch(87.9% 0.169 91.605);
    --amber-400: oklch(82.8% 0.189 84.429);
    --amber-600: oklch(66.6% 0.179 58.318);
    --amber-800: oklch(47.3% 0.137 46.201);
    --amber-950: oklch(27.9% 0.077 45.635);

    --emerald-50: oklch(97.9% 0.021 166.113);
    --emerald-200: oklch(90.5% 0.093 164.15);
    --emerald-300: oklch(84.5% 0.143 164.978);
    --emerald-800: oklch(43.2% 0.095 166.913);
    --emerald-950: oklch(26.2% 0.051 172.552);

    --sky-400: oklch(74.6% 0.16 232.661);
    --sky-600: oklch(58.8% 0.158 241.966);
    --violet-400: oklch(70.2% 0.183 293.541);
    --violet-600: oklch(54.1% 0.281 293.009);
    --rose-400: oklch(71.2% 0.194 13.428);
    --rose-600: oklch(58.6% 0.253 17.585);

    /* --- roly: svetlý režim --- */
    --bg: var(--zinc-100);
    --surface: #fff;
    --surface-muted: var(--zinc-50);
    --surface-hover: var(--zinc-100);
    --border: var(--zinc-200);
    --border-strong: var(--zinc-300);
    --text: var(--zinc-900);
    --text-muted: var(--zinc-600);
    --text-subtle: var(--zinc-500);

    /* Limetková je výplň s tmavým textom. Ako text na bielej nemá kontrast,
       preto odkazy a aktívne prvky používajú tmavší odtieň. */
    --accent: var(--lime-400);
    --accent-hover: var(--lime-300);
    --on-accent: var(--zinc-950);
    /* Hlavná farba ako text alebo ikona na tmavom podklade (bočný panel, tmavé karty). Limetková tam drží kontrast;
       tmavšia farba značky z Nastavení sa tu nahradí svetlým odtieňom (BrandColor). */
    --accent-on-dark: var(--accent);
    /* Šípka výberového poľa (.select) — farba je vnútri obrázka, preto celý obrázok ako premenná. */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394c021' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --accent-text: var(--lime-800);
    --accent-soft: var(--lime-100);
    --focus-ring: var(--lime-500);
    /* Stĺpce grafu: plocha potrebuje kontrast 3 : 1 voči pozadiu, svetlá limetková ho na bielej nemá. */
    --chart-cost: var(--chart-lime-700);
    --chart-tokens: var(--sky-600);
    --chart-questions: var(--amber-600);
    --chart-4: var(--violet-600);
    --chart-5: var(--rose-600);
    --chart-other: var(--zinc-400);
    /* Porovnanie mesiacov v kartách Nákladov. Odkazujú na farby grafu, takže tmavý režim sa prepne s nimi. */
    --compare-current: var(--chart-cost);
    --compare-previous: var(--chart-tokens);
    /* Posuvníky: podklad so sivou čiarou a posuvník s jemnou zelenou žiarou (tmavé panely ich prepíšu v app.css). */
    --scrollbar-track: var(--zinc-100);
    --scrollbar-line: var(--zinc-200);
    --scrollbar-thumb: var(--zinc-300);
    --scrollbar-thumb-hover: var(--zinc-400);
    --scrollbar-glow: color-mix(in srgb, var(--lime-500) 35%, transparent);
    /* Žiara na pozadí stránky v pravom dolnom rohu. */
    --page-glow: color-mix(in srgb, var(--lime-400) 30%, transparent);

    --success-text: var(--emerald-800);
    --success-soft: var(--emerald-50);
    --success-border: var(--emerald-200);
    --danger-text: var(--red-700);
    --danger-soft: var(--red-50);
    --danger-border: var(--red-200);
    --warning-text: var(--amber-800);
    --warning-soft: var(--amber-50);
    --warning-border: var(--amber-200);

    /* Bočný panel je tmavý v oboch režimoch — limetková na ňom drží kontrast. */
    --sidebar-bg: var(--zinc-950);
    --sidebar-text: var(--zinc-400);
    --sidebar-text-strong: var(--zinc-50);
    --sidebar-hover: var(--zinc-900);
    --sidebar-border: var(--zinc-800);

    /* --- písmo (Tailwind v4) --- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    /* Dlhý súvislý text (verejné dokumenty) — riadky ďalej od seba sa čítajú ľahšie. */
    --leading-relaxed: 1.7;

    /* --- odstupy: násobky --spacing (0.25rem) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* --- rádiusy a tiene (Tailwind v4) --- */
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* --- pohyb --- */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration: 150ms;
    --duration-panel: 250ms;

    /* --- rozmery rozloženia --- */
    --sidebar-width: 16rem;
    --topbar-height: 4rem;
}

/* Tmavý režim. Dvakrát: raz podľa voľby používateľa (data-theme), raz podľa
   systému, keď si nič nevybral alebo nejde JavaScript. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--zinc-950);
    --surface: var(--zinc-900);
    --surface-muted: oklch(21% 0.006 285.885 / 0.6);
    --surface-hover: var(--zinc-800);
    --border: var(--zinc-800);
    --border-strong: var(--zinc-700);
    --text: var(--zinc-100);
    --text-muted: var(--zinc-400);
    --text-subtle: var(--zinc-500);
    --accent-text: var(--lime-400);
    --accent-soft: var(--lime-950);
    --chart-cost: var(--chart-lime-400);
    --chart-tokens: var(--sky-400);
    --chart-questions: var(--amber-400);
    --chart-4: var(--violet-400);
    --chart-5: var(--rose-400);
    --chart-other: var(--zinc-600);
    --scrollbar-track: var(--zinc-950);
    --scrollbar-line: var(--zinc-800);
    --scrollbar-thumb: var(--zinc-800);
    --scrollbar-thumb-hover: var(--zinc-700);
    --scrollbar-glow: color-mix(in srgb, var(--lime-400) 30%, transparent);
    --page-glow: color-mix(in srgb, var(--lime-400) 18%, transparent);
    --success-text: var(--emerald-300);
    --success-soft: var(--emerald-950);
    --success-border: var(--emerald-800);
    --danger-text: var(--red-300);
    --danger-soft: var(--red-950);
    --danger-border: var(--red-700);
    --warning-text: var(--amber-300);
    --warning-soft: var(--amber-950);
    --warning-border: var(--amber-800);
    --sidebar-bg: oklch(12% 0.004 285.823);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: var(--zinc-950);
        --surface: var(--zinc-900);
        --surface-muted: oklch(21% 0.006 285.885 / 0.6);
        --surface-hover: var(--zinc-800);
        --border: var(--zinc-800);
        --border-strong: var(--zinc-700);
        --text: var(--zinc-100);
        --text-muted: var(--zinc-400);
        --text-subtle: var(--zinc-500);
        --accent-text: var(--lime-400);
        --accent-soft: var(--lime-950);
        --chart-cost: var(--chart-lime-400);
        --chart-tokens: var(--sky-400);
        --chart-questions: var(--amber-400);
        --chart-4: var(--violet-400);
        --chart-5: var(--rose-400);
        --chart-other: var(--zinc-600);
        --scrollbar-track: var(--zinc-950);
        --scrollbar-line: var(--zinc-800);
        --scrollbar-thumb: var(--zinc-800);
        --scrollbar-thumb-hover: var(--zinc-700);
        --scrollbar-glow: color-mix(in srgb, var(--lime-400) 30%, transparent);
        --page-glow: color-mix(in srgb, var(--lime-400) 18%, transparent);
        --success-text: var(--emerald-300);
        --success-soft: var(--emerald-950);
        --success-border: var(--emerald-800);
        --danger-text: var(--red-300);
        --danger-soft: var(--red-950);
        --danger-border: var(--red-700);
        --warning-text: var(--amber-300);
        --warning-soft: var(--amber-950);
        --warning-border: var(--amber-800);
        --sidebar-bg: oklch(12% 0.004 285.823);
    }
}