/* Design tokeny a zakladny reset — zdielane appkou aj landing page.
 *
 * TOTO JE JEDINE MIESTO, KDE SMIE BYT ZAPISANY HEX.
 * V app.css ani landing.css uz ziadny nie je. Ked potrebujes farbu, ktora tu
 * nie je, pridaj token — nepis hodnotu do pravidla. Dovod: kazda farba musi
 * mat protajsok v svetlej teme, a hodnota schovana v pravidle sa na to zabudne.
 */
:root{
/* ---- pisma ------------------------------------------------------------- */
--font-sans:Inter,system-ui,-apple-system,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

/* ---- rozmery ----------------------------------------------------------- */
--sbw:300px;--hh:140px;--radius:12px;

/* ---- velkosti pisma -----------------------------------------------------
   Cielova skupina ma 30-55 rokov a cita to na stavbe, v aute a na slnku.
   Povodne hodnoty (15.5 / 12 / 13.5 px) boli navrhnute pre monitor.
   Fonetika prestala byt najtlmenejsim prvkom karty: dnes ma velkost prekladu
   a odlisuje ju len farba odboru. */
--fs-de:21px;                     /* nemecky pojem */
--fs-de-phrase:18px;              /* nemecka fraza — dlhsia, preto mensia */
--fs-pron:17px;                   /* fonetika — rovnako velka ako preklad */
--fs-sk:17px;                     /* slovensky preklad pojmu */
--fs-sk-phrase:16px;              /* preklad frazy */
--fs-note:14px;                   /* poznamka pri hesle */
--fs-ui:16px;                     /* bezny text a menu */
--fs-h2:28px;                     /* nadpis kapitoly */
--lh:1.55;                        /* riadkovanie 1.5-1.7 podla zadania */
/* Najmensi dotykovy ciel. Pouzivatel to otvara so studenymi a spinavymi
   rukami, casto v rukaviciach — 44 px je spodna hranica, nie ciel. */
--tap:44px;

/* ---- povrchy a linky --------------------------------------------------- */
--bg:#0F1116;--bg2:#12151B;--panel:#1A1E26;--panel2:#212632;--line:#2C313C;--line2:#373D4A;
/* Dekorativny okraj karty. Na rozdiel od --dim nenesie text, takze
   kontrastom prechadzat nemusi. */
--line-dim:#5A606C;
/* Zatmavenie pod vysunutym panelom na mobile. */
--scrim:#000000;--scrim-strong:#000000cc;
--shadow-deep:#00000066;   /* tien pod maketou telefonu */

/* ---- text -------------------------------------------------------------- */
/* --dim je najtlmenejsi TEXT, preto musi prejst WCAG AA (4.5:1) na kazdom
   pozadi. Povodne #5A606C / #9AA1AC davalo 2.4 a 2.3 — bocny panel appky
   sa nedal precitat. */
--ink:#EDEFF2;--ink2:#C4C8D0;--mut:#878D99;--dim:#8A919D;

/* ---- farby vodicov ----------------------------------------------------- */
/* L hneda, N modra, PE zelenozlta. Nesu vyznam a stranka odboru ich vysvetluje
   v sekcii o rolach hovoriacich — nie su to nahodne akcenty. */
--L:#C06B26;--N:#3B7FC4;--PE:#AFC017;
--pe-bright:#CFE030;              /* svetly koniec prechodu na pase pokroku */
--pe-ink:#12151B;                 /* text na sytej zelenej ploche */
--tint-pe:#AFC01714;              /* jemne zelene pozadie zapnutej fajky */
--glow-pe:#AFC01755;--glow-pe-out:#AFC01700;

/* ---- znacka a stavy ---------------------------------------------------- */
--signal:#F0B93E;--signalink:#0F1116;--ok:#5FBE6B;--bad:#E06A5A;
--signal-dark:#D99A3A;            /* tmavsi jantar na obrysy pri prejdeni */
/* Odznak s poctom kariet na opakovanie. Biely text na lososovej mal 3.29:1
   a padal v OBOCH temach — preto tmavy glyf na sytej v tmavej teme
   a biely na tmavsej cervenej v svetlej. */
--badge-bg:#E06A5A;--badge-ink:#0F1116;
/* Akcenty pouzite ako TEXT. V tmavom motive su rovnake ako --signal/--PE,
   v svetlom stmavnu, aby text presiel WCAG AA. Pozadia tlacidiel pouzivaju
   povodne --signal/--PE, tie sa nemenia. */
--accent-text:#F0B93E;--pe-text:#AFC017;--bad-text:#E06A5A;
/* Modra a hneda vodica ako TEXT prepadali aj v tmavej teme (3.62 a 3.87) —
   maju vlastne, svetlejsie varianty. Vypln a obrys pouzivaju povodne --N/--L. */
--n-text:#6FA8E3;--l-text:#E09858;--ok-text:#6FC97A;

/* ---- jantarove prekryvy ------------------------------------------------ */
/* Priesvitny jantar nad tmavym pozadim. V svetlej teme je nad bielou skoro
   neviditelny, preto ma vlastne hodnoty nizsie. */
--tint-signal:#F0B93E14;          /* jemna vypln — aktivna polozka panela */
--tint-signal-2:#F0B93E1F;        /* vyraznejsia vypln — zvyrazneny stitok */
--tint-signal-3:#F0B93E18;        /* pozadie rimskej cislice sekcie */
--edge-signal:#F0B93E33;          /* jantarova hranica */
--ring-signal:#F0B93E22;          /* prstenec pri zaostreni */
--glow-signal:#F0B93E44;

/* ---- spatna vazba v testoch a opakovani -------------------------------- */
--ok-bg:#1C2A1C;--ok-ink:#BFE6B6;
--bad-bg:#2A1C1A;--bad-ink:#EAB5AC;
--danger-line:#6A3530;

/* ---- upozornenie ------------------------------------------------------- */
--warn-bg:#241F10;--warn-line:#4A3F1E;--warn-ink:#EBD79B;

/* ---- znacka ------------------------------------------------------------
   Lava polovica matice berie currentColor, prava --brand-2. Ziadny podklad:
   znak je logo sam o sebe, nie ikona v jantarovom stvorci. */
--brand-2:#3186E9;
}

/* ---- svetla tema --------------------------------------------------------
   Nie je to tmava s prehodenymi farbami — kazdy token ma vlastnu hodnotu
   dopocitanu tak, aby presiel WCAG AA na svetlych pozadiach. Selektor je na
   :root (nie na body), aby ho vedel nastavit skript v <head> este pred
   vykreslenim a stranka neblikla tmavou. */
:root[data-theme=light]{
--bg:#EEF1F5;--bg2:#FFFFFF;--panel:#FFFFFF;--panel2:#F1F3F7;--line:#E1E5EC;--line2:#CFD5DE;
--line-dim:#9AA1AC;
--ink:#181B21;--ink2:#3A404B;--mut:#5F666F;--dim:#666D78;
--signalink:#1A1200;
--accent-text:#8A5D00;--pe-text:#5E6800;--bad-text:#B23B2B;
--n-text:#255589;--l-text:#84470F;--ok-text:#186B28;
--signal-dark:#8A5D00;
--badge-bg:#B23B2B;--badge-ink:#FFFFFF;
/* Priesvitny jantar nad bielou je takmer neviditelny, preto vyssia alfa. */
--tint-signal:#F0B93E2E;--tint-signal-2:#F0B93E42;--tint-signal-3:#F0B93E33;
--edge-signal:#8A5D0055;--ring-signal:#F0B93E55;--glow-signal:#F0B93E66;
--tint-pe:#AFC01733;
/* Spatna vazba: tmavozeleny a tmavocerveny box na bielom papieri nedava zmysel. */
--ok-bg:#E4F3E2;--ok-ink:#1E5B2A;
--bad-bg:#FCE8E4;--bad-ink:#8E2E1E;
--danger-line:#D9A69E;
--warn-bg:#FCF3DA;--warn-line:#E2CE97;--warn-ink:#6B4E00;
--pe-bright:#8FA00E;
}
/* Bez ulozenej volby rozhoduje system. Skript v <head> to prepise na
   data-theme="light"/"dark", toto je poistka, keby nezbehol. */
@media (prefers-color-scheme: light){
:root:not([data-theme=dark]){
--bg:#EEF1F5;--bg2:#FFFFFF;--panel:#FFFFFF;--panel2:#F1F3F7;--line:#E1E5EC;--line2:#CFD5DE;
--line-dim:#9AA1AC;
--ink:#181B21;--ink2:#3A404B;--mut:#5F666F;--dim:#666D78;
--signalink:#1A1200;
--accent-text:#8A5D00;--pe-text:#5E6800;--bad-text:#B23B2B;
--n-text:#255589;--l-text:#84470F;--ok-text:#186B28;
--signal-dark:#8A5D00;
--badge-bg:#B23B2B;--badge-ink:#FFFFFF;
--tint-signal:#F0B93E2E;--tint-signal-2:#F0B93E42;--tint-signal-3:#F0B93E33;
--edge-signal:#8A5D0055;--ring-signal:#F0B93E55;--glow-signal:#F0B93E66;
--tint-pe:#AFC01733;
--ok-bg:#E4F3E2;--ok-ink:#1E5B2A;
--bad-bg:#FCE8E4;--bad-ink:#8E2E1E;
--danger-line:#D9A69E;
--warn-bg:#FCF3DA;--warn-line:#E2CE97;--warn-ink:#6B4E00;
--pe-bright:#8FA00E;
}}

/* ---- tlac ---------------------------------------------------------------
   Tlaci sa vzdy na biely papier, bez ohladu na motiv. Vlastna sada tokenov,
   aby v @media print nemusel byt ani jeden hex. */
@media print{
:root{--print-bg:#FFFFFF;--print-ink:#000000;--print-ink2:#333333;--print-mut:#555555;
--print-line:#CCCCCC;--print-line2:#999999;}
}

*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);line-height:var(--lh);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}
mark{background:var(--signal);color:var(--signalink);border-radius:3px;padding:0 1px}