/* =====================================================================
   Učiteľský Šuflík – dizajnový systém (tokeny, komponenty, tmavý / svetlý režim)
   Načítava sa pre vzhľady Predvolený (zošit) a Jeseň – po suflik.css, pred zosit.css / jesen.css.
   Vzhľad „Pôvodný (záloha)“ (legacy-theme) ho nenačítava – ostáva presne taký, aký bol.

   Ako funguje svetlý režim: šablóny používajú triedy Tailwindu (text-white, bg-slate-900…),
   ktoré čítajú farby z premenných (--color-…). Pre <html data-theme="light"> ich tu
   preklopíme – tmavé povrchy zosvetlia a svetlý text stmavne. Akcentové farby (ružová,
   mätová, ceruzková) dostanú v svetlom režime sýtejší odtieň, aby mal text dostatočný kontrast.

   Sémantické tokeny (používajte ich v nových štýloch namiesto pevných farieb):
     --m-bg, --m-surface, --m-surface-2, --m-input   pozadie stránky, karty, vnorené plochy, polia
     --m-border, --m-border-strong                    okraje
     --m-shadow, --m-shadow-lg                        tiene
     --su-radius-sm / md / lg / xl                    zaoblenia 10 / 14 / 20 / 28 px
   ===================================================================== */
:root { --su-radius-sm: 10px; --su-radius-md: 14px; --su-radius-lg: 20px; --su-radius-xl: 28px; }
/* ---------------------------------------------------------------------
   1. Farby – tmavý režim (predvolený)
   --------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* Neutrálne odtiene zladené s pôvodnou „ink“ farbou (#060810) – jeden súdržný tón namiesto
       sivomodrej z Tailwindu. Stredné odtiene sú svetlejšie → popisky majú lepší kontrast. */
    --color-ink: #070a13;
    --color-slate-950: #070a13;
    --color-slate-900: #0f1321;
    --color-slate-800: #1b2133;
    --color-slate-700: #2a3248;
    --color-slate-600: #4a546c;
    --color-slate-500: #7f8aa0;
    --color-slate-400: #a1abbe;
    --color-slate-300: #c5ccd9;
    --color-slate-200: #dee3eb;
    --color-slate-100: #eef1f6;

    --m-bg: #070a13;
    --m-surface: #0e1220;
    --m-surface-2: #131829;
    --m-input: #0a0e19;
    --m-border: rgba(161, 171, 190, 0.11);
    --m-border-strong: rgba(161, 171, 190, 0.2);
    --m-dot: rgba(161, 171, 190, 0.12);
    --m-glow-pink: rgba(237, 86, 134, 0.13);
    --m-glow-mint: rgba(169, 232, 161, 0.08);
    --m-glow-pencil: rgba(250, 204, 21, 0.04);
    --m-highlight: rgba(255, 255, 255, 0.045);
    --m-shadow:
        0 1px 0 0 var(--m-highlight) inset,
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 18px 40px -22px rgba(0, 0, 0, 0.75);
    --m-shadow-lg:
        0 1px 0 0 var(--m-highlight) inset,
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 30px 60px -28px rgba(0, 0, 0, 0.85);
    --m-footer: #05070d;
    --m-doodle-opacity: 0.42;
}

/* ---------------------------------------------------------------------
   2. Farby – svetlý režim
   --------------------------------------------------------------------- */
[data-theme="light"] {
    color-scheme: light;

    --color-white: #11141f;          /* nadpisy a hlavný text */
    --color-ink: #f6f5f0;            /* pozadie stránky („papier“) */
    --color-slate-950: #f2f2ed;
    --color-slate-900: #ffffff;
    --color-slate-800: #e5e5df;
    --color-slate-700: #d4d4cc;
    --color-slate-600: #a2a5ad;
    --color-slate-500: #5d6474;      /* 5,9 : 1 na bielej */
    --color-slate-400: #4a5161;
    --color-slate-300: #353b49;
    --color-slate-200: #252a36;
    --color-slate-100: #171b25;
    --color-slate-50: #11141f;

    /* Akcenty: rovnaký odtieň, sýtejší tón (text aj tlačidlá spĺňajú kontrast) */
    --color-pink: #b82a58;
    --color-pink-dark: #9c2249;
    --color-mint: #1c703d;
    --color-mint-dark: #175f33;
    --color-pencil: #805700;

    /* Svetlé odtiene farieb (text na tmavom) → tmavé odtiene (text na svetlom) */
    --color-amber-100: #78350f; --color-amber-200: #92400e; --color-amber-300: #a14a0c; --color-amber-400: #8f4508;
    --color-rose-100: #881337;  --color-rose-200: #9f1239;  --color-rose-300: #be123c;  --color-rose-400: #d01e4b;
    --color-emerald-100: #064e3b; --color-emerald-200: #065f46; --color-emerald-300: #047857; --color-emerald-400: #05875f;
    --color-sky-100: #0c4a6e;   --color-sky-200: #075985;   --color-sky-300: #0369a1;   --color-sky-400: #0277b6;
    --color-blue-300: #1d4ed8;  --color-blue-400: #2459df;
    --color-red-300: #b91c1c;   --color-orange-300: #c2410c; --color-orange-400: #c2410c;
    --color-yellow-300: #a16207; --color-lime-300: #4d7c0f;  --color-green-300: #15803d;
    --color-teal-300: #0f766e;  --color-cyan-300: #0e7490;   --color-indigo-300: #4338ca;
    --color-violet-300: #6d28d9; --color-purple-300: #7e22ce; --color-fuchsia-300: #a21caf;
    --color-pink-300: #be185d;
    /* farby predmetov (ikony, štítky) – 400 odtiene stmavené pre svetlý papier */
    --color-cyan-400: #0891b2; --color-green-400: #16a34a; --color-lime-400: #4d7c0f; --color-purple-400: #9333ea;
    --color-indigo-400: #4f46e5; --color-pink-400: #db2777; --color-fuchsia-400: #c026d3; --color-red-400: #dc2626;
    --color-yellow-400: #a16207; --color-teal-400: #0d9488; --color-violet-400: #7c3aed; --color-stone-400: #78716c;

    --su-pink: #b82a58;
    --su-mint: #1c703d;
    --su-pencil: #805700;

    --m-bg: #f6f5f0;
    --m-surface: #ffffff;
    --m-surface-2: #fbfbf8;
    --m-input: #f7f7f3;
    --m-border: rgba(17, 20, 31, 0.08);
    --m-border-strong: rgba(17, 20, 31, 0.14);
    --m-dot: rgba(17, 20, 31, 0.09);
    --m-glow-pink: rgba(237, 86, 134, 0.12);
    --m-glow-mint: rgba(110, 200, 120, 0.12);
    --m-glow-pencil: rgba(250, 204, 21, 0.1);
    --m-highlight: rgba(255, 255, 255, 0.9);
    --m-shadow:
        0 1px 2px rgba(17, 20, 31, 0.05),
        0 10px 28px -16px rgba(17, 20, 31, 0.16);
    --m-shadow-lg:
        0 2px 6px rgba(17, 20, 31, 0.05),
        0 26px 50px -24px rgba(17, 20, 31, 0.22);
    --m-footer: #efeee8;
    --m-doodle-opacity: 0.5;
}

/* Plné akcentové plochy majú vždy biely text (aj v svetlom režime) */
[data-theme="light"] :is(.bg-pink, .bg-pink-dark, .bg-rose-500, .bg-rose-600, .bg-sky-500, .bg-blue-500,
    .bg-emerald-500, .bg-amber-500, .bg-mint, .bg-mint-dark, .bg-pencil, .from-pink,
    .bg-\[\#ED5686\], .bg-\[\#d94875\]),
[data-theme="light"] :is([class*="hover:bg-pink"], [class*="hover:bg-rose-5"], [class*="hover:bg-rose-6"], [class*="hover:bg-mint"]):hover {
    --color-white: #ffffff;
}

/* Ostrovy, ktoré ostávajú tmavé aj v svetlom režime (školská tabuľa v hlavičke chatu) */
[data-theme="light"] .chalkboard {
    --color-white: #ffffff;
    --color-slate-100: #eef1f6; --color-slate-200: #dee3eb; --color-slate-300: #c5ccd9;
    --color-slate-400: #a1abbe; --color-slate-500: #7f8aa0;
    --color-mint: #A9E8A1; --color-pink: #ED5686; --color-pencil: #FACC15;
    --color-emerald-100: #d1fae5; --color-emerald-200: #a7f3d0; --color-emerald-300: #6ee7b7; --color-emerald-400: #34d399;
    --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24;
    --color-rose-300: #fda4af; --color-rose-400: #fb7185; --color-sky-300: #7dd3fc;
}


/* ---------------------------------------------------------------------
   3. Základ: typografia, výber textu, posuvníky
   --------------------------------------------------------------------- */
/* Pozadie stránky nastavuje vzhľad (zosit.css) na <body> – <html> ho nesmie mať, inak by zakryl stranu zošita. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss03";   /* Inter: jednoduché „a“, okrúhlejšie číslice */
}
.font-display { letter-spacing: -0.028em; }
h2.font-display { text-wrap: balance; }
p { text-wrap: pretty; }

/* Drobné popisky (9–10 px) boli ťažko čitateľné – o kúsok väčšie, menej „roztiahnuté“ */
.text-\[8px\] { font-size: 9.5px; }
.text-\[9px\] { font-size: 10.5px; }
.text-\[10px\] { font-size: 11px; }
.tracking-widest { letter-spacing: 0.11em; }
.tracking-wider { letter-spacing: 0.06em; }

* { scrollbar-color: var(--color-slate-700) transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-slate-700); }
::selection { background: var(--color-pink); color: #fff; }

/* Plávajúce kresby ostávajú (rovnaké animácie), len tlmenejšie – obsah má prednosť */
.doodle-layer { opacity: var(--m-doodle-opacity); }
[data-theme="light"] .doodle-layer { filter: saturate(1.15) contrast(1.05); }
[data-theme="light"] .doodle-layer [stroke="#fff"], [data-theme="light"] .doodle-layer [stroke="white"],
[data-theme="light"] .doodle-layer [fill="#fff"], [data-theme="light"] .doodle-layer [fill="white"] { filter: invert(1); }

/* ---------------------------------------------------------------------
   4. Navigácia a prepínač režimu
   --------------------------------------------------------------------- */
body > div.sticky.top-0.z-50 :is(.rounded-3xl.shadow-2xl, .rounded-2xl.shadow-2xl), .su-select-list {
    border-color: var(--m-border-strong);
    box-shadow: var(--m-shadow-lg);
    background-color: var(--m-surface);   /* plné pozadie – obsah stránky nesmie presvitať */
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
}

/* Prepínač tmavý / svetlý režim */
.su-theme-toggle { color: var(--color-pencil); }
.su-theme-toggle svg { position: absolute; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.su-theme-toggle .su-tt-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
[data-theme="light"] .su-theme-toggle { color: #5b4bd6; }
[data-theme="light"] .su-theme-toggle .su-tt-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
[data-theme="light"] .su-theme-toggle .su-tt-moon { opacity: 1; transform: none; }
.su-theme-toggle:hover .su-tt-sun { transform: rotate(45deg); }

/* Plynulé prepnutie režimu (View Transitions) */
html.su-theme-switching::view-transition-old(root) { animation: su-theme-out .35s ease both; }
html.su-theme-switching::view-transition-new(root) { animation: su-theme-in .35s ease both; }
@keyframes su-theme-out { to { opacity: 0; } }
@keyframes su-theme-in { from { opacity: 0; } }


/* ---------------------------------------------------------------------
   5. Karty, povrchy, tlačidlá
   --------------------------------------------------------------------- */
.su-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 1.25rem;
    box-shadow: var(--m-shadow);
}
/* Karty s farebným prechodom (kroky „Ako funguje“, pódium) – prechod konečne vidno */
.su-card[class*="bg-gradient-to"] { background-image: linear-gradient(var(--tw-gradient-stops)); }

/* Karta materiálu: čistý zdvih bez náklonu, jemná ružová žiara */
.material-card { transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .3s; }
.material-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-pink) 42%, transparent);
    box-shadow: var(--m-shadow), 0 26px 50px -26px color-mix(in srgb, var(--color-pink) 55%, transparent);
}
.material-card .tape {
    width: 70px; height: 18px; top: -8px;
    background: color-mix(in srgb, var(--color-pencil) 26%, transparent);
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* Plné tlačidlá: jemný lesk zhora a mäkký farebný tieň */
:is(a, button).bg-pink, :is(a, button).bg-\[\#ED5686\] {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -12px color-mix(in srgb, var(--color-pink) 75%, transparent);
}
:is(a, button).bg-mint {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px -12px color-mix(in srgb, var(--color-mint) 70%, transparent);
}
:is(a, button).bg-pink:hover, :is(a, button).bg-mint:hover { filter: brightness(1.05); }
:is(a, button):is(.bg-pink, .bg-mint):disabled { box-shadow: none; filter: none; }

/* Sekundárne tlačidlá / ikonové tlačidlá v hlavičke */
:is(a, button).bg-slate-900.border-slate-800 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

/* Formulárové polia */
.su-input {
    background: var(--m-input);
    border: 1px solid var(--m-border-strong);
    border-radius: 0.9rem;
    font-size: 0.875rem;
    color: var(--color-slate-100);
}
.su-input:hover { border-color: color-mix(in srgb, var(--color-slate-500) 45%, transparent); }
.su-input:focus { border-color: var(--color-mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-mint) 18%, transparent); }
.su-input::placeholder { color: var(--color-slate-500); }
select, input, textarea { accent-color: var(--color-pink); }

/* Viditeľný fokus pri ovládaní klávesnicou */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-mint); outline-offset: 3px; border-radius: 8px;
}

/* Kostra načítania */
.su-skeleton {
    background: linear-gradient(90deg, var(--color-slate-900) 25%, var(--color-slate-800) 37%, var(--color-slate-900) 63%);
    background-size: 400% 100%;
}

/* Text s prechodom farieb – v svetlom režime sýtejší */
[data-theme="light"] .text-gradient { background-image: linear-gradient(120deg, var(--color-mint) 0%, #c2457a 50%, var(--color-pink) 100%); }


/* Prepínače (napr. v okne cookies) – gulička ostáva biela */
[data-theme="light"] .rounded-full.bg-white.shadow { background-color: #fff; box-shadow: 0 1px 3px rgba(17, 20, 31, .25); }
/* Biely štítok v katalógu (počet filtrov) */
[data-theme="light"] .bg-white.text-slate-950 { --color-slate-950: #ffffff; }

/* ---------------------------------------------------------------------
   6. Chat „Zborovňa“ v svetlom režime – svetlý papier s linajkami
   --------------------------------------------------------------------- */
[data-theme="light"] .chat-paper {
    background-color: #fbfaf6;
    background-image:
        linear-gradient(90deg, transparent 34px, rgba(210, 58, 108, 0.25) 34px, rgba(210, 58, 108, 0.25) 35px, transparent 35px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(17, 20, 31, 0.06) 27px, rgba(17, 20, 31, 0.06) 28px);
}

/* Obrázky a náhľady v svetlom režime – jemný rámik, aby biele strany nesplývali s kartou */
[data-theme="light"] .material-card img, [data-theme="light"] #material-gallery img { outline: 1px solid var(--m-border); outline-offset: -1px; }

@media (prefers-reduced-motion: reduce) {
    .su-theme-toggle svg { transition: none; }
    .material-card:hover { transform: none; }
}

/* Úzke telefóny (do 400 px): logo + prepínač režimu + košík + menu sa musia zmestiť vedľa seba */
@media (max-width: 400px) {
    body > div.sticky.top-0.z-50 > nav .lg\:hidden > :is(a, button).w-11 { width: 2.5rem; height: 2.5rem; }
    body > div.sticky.top-0.z-50 > nav .lg\:hidden { gap: 0.375rem; }
    body > div.sticky.top-0.z-50 > nav a.group > .font-display.text-lg { font-size: 1rem; }
    body > div.sticky.top-0.z-50 > nav a.group { gap: 0.5rem; }
}

/* Ilustrácie (šuflík v hlavičke, logo, prázdne stavy) berú akcent z aktuálneho vzhľadu */
svg [fill="#ED5686"] { fill: var(--color-pink); }
svg [stroke="#ED5686"] { stroke: var(--color-pink); }

/* Plné ružové plochy s bielym textom (tlačidlá, odznaky): v tmavom režime o tón sýtejšia ružová,
   aby biely text spĺňal kontrast WCAG AA (4,6 : 1). Ružový text a akcenty ostávajú pôvodné #ED5686. */
:root { --su-pink-solid: #d23a6c; --su-pink-solid-hover: #b92d5c; }
[data-theme="light"] { --su-pink-solid: var(--color-pink); --su-pink-solid-hover: var(--color-pink-dark); }
.bg-pink, .bg-\[\#ED5686\] { background-color: var(--su-pink-solid); }
.hover\:bg-pink-dark:hover, .hover\:bg-\[\#d94875\]:hover, .bg-pink.hover\:bg-pink-dark:hover { background-color: var(--su-pink-solid-hover); }

/* Farebné ikony v svetlom režime – sýtejšie odtiene, aby boli na papieri výrazné */
[data-theme="light"] {
    --t-orange: #ea580c; --t-amber: #d97706; --t-gold: #ca8a04; --t-sky: #0284c7; --t-violet: #7c3aed;
    --t-fuchsia: #c026d3; --t-mint: #16a34a; --t-pink: #db2777; --t-emerald: #059669; --t-rose: #e11d48; --t-teal: #0d9488;
}
[data-theme="light"] .su-duo:not(.su-i-fill) :is(path, circle, rect, ellipse, polygon) { fill-opacity: 0.16; }