/* ==========================================================================
   YOKLA — farebné tokeny pre Light / Dark mode (od verzie 1.3.0)
   --------------------------------------------------------------------------
   Jediný zdroj farieb pre hlavný web, e-shop, administráciu aj chybové
   stránky 403/404. Režim určuje atribút data-theme na <html>, ktorý nastaví
   malý skript v <head> ešte pred vykreslením (assets/js/theme.js ho potom
   ovláda prepínačom Auto / Svetlý / Tmavý). Bez JavaScriptu platí systémové
   nastavenie (prefers-color-scheme), inak light.

   Light: podklad #F1F4F9 (60 %), modrá #0D32A7 (30 % — bannery, pätka,
   hlavné tlačidlá), bridlica #1E293B (10 % — texty, sekundárne tlačidlá);
   oranžová len ako mikrografika (+ tlačidlo E-shop).
   Dark: antracit #0F172A (60 %), modrá #0D32A7 na rámy/karty/zvýraznenia
   (30 %), oranžová na svietiace CTA (10 %).

   Pôvodné názvy premenných (--cream, --navy, --ink, --white, ...) ostávajú
   ako aliasy, aby fungovali aj staršie inline štýly v HTML/PHP:
     --navy  = farba odkazov/zvýraznených textov (v dark svetlejšia modrá)
     --white = povrch kariet (v dark #1E293B) — NIE farba textu na modrej,
               na to slúži --on-brand.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F1F4F9;
  --bg-soft: #F7F9FC;
  --bg-alt: #E6EBF3;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-raised: #FFFFFF;
  --text: #1E293B;
  --text-muted: #475569;
  --heading: #0D32A7;
  --link: #0D32A7;
  --link-hover: #0A2785;
  --brand: #0D32A7;
  --brand-2: #0A2785;
  --brand-soft: #E3E9F6;
  --brand-grad-end: #3352B5;
  --on-brand: #FFFFFF;
  --accent: #E8762E;
  --accent-strong: #C85F1E;
  --accent-hover: #B5541A;
  --on-accent: #FFFFFF;
  --accent-glow: rgba(232, 118, 46, 0.38);
  --secondary: #1E293B;
  --secondary-hover: #0F172A;
  --on-secondary: #FFFFFF;
  --line: #D9E0EA;
  --line-strong: #C3CDDC;
  --card-border: #DDE4EE;
  --header-bg: #FFFFFF;
  --footer-bg: #0D32A7;
  --footer-border: transparent;
  --input-bg: #F7F9FC;
  --input-border: #C9D3E1;
  --photo-plate: #FFFFFF;
  --overlay: rgba(13, 50, 167, 0.97);
  --overlay-dark: rgba(15, 23, 42, 0.92);
  --icon: #0D32A7;
  --star: #E8762E;
  --star-empty: #CBD5E1;
  --focus: #E8762E;
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.10);
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  --success-bg: #E7F5EC;  --success-text: #1E7A3D;  --success-line: rgba(30, 122, 61, 0.25);
  --warning-bg: #FFF3D6;  --warning-text: #8A5A00;  --warning-line: rgba(138, 90, 0, 0.25);
  --danger-bg: #FBEAE5;   --danger-text: #A3361E;   --danger-line: rgba(163, 54, 30, 0.25);
  --info-bg: #E3EEFB;     --info-text: #1E5A9A;     --info-line: rgba(30, 90, 154, 0.25);
  --violet-bg: #EAE6FB;   --violet-text: #5B3FBF;
  --neutral-bg: #EEF1F5;  --neutral-text: #5B6575;
  --new-bg: #FBEAE5;      --new-text: #A4491A;
  --price: #0D32A7;
  --logo-light-display: block;
  --logo-dark-display: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F172A;
  --bg-soft: #131C31;
  --bg-alt: #131C31;
  --surface: #1E293B;
  --surface-2: #172135;
  --surface-raised: #243247;
  --text: #E2E8F0;
  --text-muted: #94A3B8;
  --heading: #DCE4FF;
  --link: #8FA8FF;
  --link-hover: #B6C6FF;
  --brand: #0D32A7;
  --brand-2: #1A43C7;
  --brand-soft: #172447;
  --brand-grad-end: #1B3A9E;
  --on-brand: #FFFFFF;
  --accent: #E8762E;
  --accent-strong: #C85F1E;
  --accent-hover: #D96A24;
  --on-accent: #FFFFFF;
  --accent-glow: rgba(232, 118, 46, 0.45);
  --secondary: #E2E8F0;
  --secondary-hover: #FFFFFF;
  --on-secondary: #0F172A;
  --line: #26344F;
  --line-strong: #34466A;
  --card-border: #0D32A7;
  --header-bg: #0F172A;
  --footer-bg: #0B1222;
  --footer-border: #0D32A7;
  --input-bg: #0F172A;
  --input-border: #34466A;
  --photo-plate: #EEF2F7;
  --overlay: rgba(11, 18, 34, 0.97);
  --overlay-dark: rgba(5, 8, 16, 0.94);
  --icon: #8FA8FF;
  --star: #E8762E;
  --star-empty: #34466A;
  --focus: #E8762E;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.30);
  --success-bg: rgba(34, 197, 94, 0.14);   --success-text: #86EFAC;  --success-line: rgba(134, 239, 172, 0.30);
  --warning-bg: rgba(234, 179, 8, 0.14);   --warning-text: #FDE68A;  --warning-line: rgba(253, 230, 138, 0.30);
  --danger-bg: rgba(239, 68, 68, 0.15);    --danger-text: #FCA5A5;   --danger-line: rgba(252, 165, 165, 0.30);
  --info-bg: rgba(59, 130, 246, 0.16);     --info-text: #93C5FD;     --info-line: rgba(147, 197, 253, 0.30);
  --violet-bg: rgba(139, 92, 246, 0.18);   --violet-text: #C4B5FD;
  --neutral-bg: rgba(148, 163, 184, 0.14); --neutral-text: #CBD5E1;
  --new-bg: rgba(232, 118, 46, 0.16);      --new-text: #FDBA8C;
  --price: #F2955A;
  --logo-light-display: none;
  --logo-dark-display: block;
}

/* Bez JavaScriptu (žiadny data-theme) sa riadime systémom. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0F172A; --bg-soft: #131C31; --bg-alt: #131C31;
    --surface: #1E293B; --surface-2: #172135; --surface-raised: #243247;
    --text: #E2E8F0; --text-muted: #94A3B8; --heading: #DCE4FF;
    --link: #8FA8FF; --link-hover: #B6C6FF;
    --brand-2: #1A43C7; --brand-soft: #172447; --brand-grad-end: #1B3A9E;
    --accent-hover: #D96A24; --accent-glow: rgba(232, 118, 46, 0.45);
    --secondary: #E2E8F0; --secondary-hover: #FFFFFF; --on-secondary: #0F172A;
    --line: #26344F; --line-strong: #34466A; --card-border: #0D32A7;
    --header-bg: #0F172A; --footer-bg: #0B1222; --footer-border: #0D32A7;
    --input-bg: #0F172A; --input-border: #34466A; --photo-plate: #EEF2F7;
    --overlay: rgba(11, 18, 34, 0.97); --overlay-dark: rgba(5, 8, 16, 0.94);
    --icon: #8FA8FF; --star-empty: #34466A;
    --shadow: 0 20px 45px rgba(0, 0, 0, 0.45); --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.30);
    --success-bg: rgba(34, 197, 94, 0.14); --success-text: #86EFAC; --success-line: rgba(134, 239, 172, 0.30);
    --warning-bg: rgba(234, 179, 8, 0.14); --warning-text: #FDE68A; --warning-line: rgba(253, 230, 138, 0.30);
    --danger-bg: rgba(239, 68, 68, 0.15); --danger-text: #FCA5A5; --danger-line: rgba(252, 165, 165, 0.30);
    --info-bg: rgba(59, 130, 246, 0.16); --info-text: #93C5FD; --info-line: rgba(147, 197, 253, 0.30);
    --violet-bg: rgba(139, 92, 246, 0.18); --violet-text: #C4B5FD;
    --neutral-bg: rgba(148, 163, 184, 0.14); --neutral-text: #CBD5E1;
    --new-bg: rgba(232, 118, 46, 0.16); --new-text: #FDBA8C; --price: #F2955A;
    --logo-light-display: none; --logo-dark-display: block;
  }
}

/* Aliasy pôvodných názvov (staršie inline štýly v HTML/PHP). */
:root {
  --cream: var(--bg);
  --cream-soft: var(--bg-soft);
  --cream-deep: var(--bg-alt);
  --navy: var(--link);
  --navy-2: var(--brand-2);
  --navy-soft: var(--brand-soft);
  --orange: var(--accent);
  --orange-dark: var(--accent-strong);
  --ink: var(--text);
  --ink-soft: var(--text-muted);
  --white: var(--surface);
}

/* Logo: v light modrý štvorec, v dark biele "Y" + YOKLA bez pozadia. */
.logo-light { display: var(--logo-light-display) !important; }
.logo-dark { display: var(--logo-dark-display) !important; }

/* Plynulý prechod pri ručnom prepnutí (theme.js pridá triedu len na chvíľu,
   aby sa animácia nespúšťala pri načítaní stránky). */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease !important;
}

/* ---------- Prepínač režimu (Auto / Svetlý / Tmavý) ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  width: fit-content;
}
.theme-switch button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 30px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .18s ease, color .18s ease;
}
.theme-switch button svg { width: 16px; height: 16px; display: block; }
.theme-switch button:hover:not(.active) { color: var(--link); }
.theme-switch button.active { background: var(--brand); color: var(--on-brand); }
.theme-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }