/* ==========================================================================
   Dizajnový systém: všetko ladenie je v tomto súbore.
   Paleta (data-paleta) a písmo (data-pismo) sa dajú prepnúť na <html>
   alebo na ľubovoľnom prvku. Predvolené: fialová a žltá + Bricolage Grotesque.
   Kontrast textu voči pozadiu aj bieleho textu na farebných plochách je
   navrhnutý na WCAG AA (min. 4,5:1).
   ========================================================================== */

/* ---------- farby: fialová a žltá na čistom svetlom pozadí ---------- */
/* Doplnková: levanduľová (hlavičky blokov, tmavý text --second-ink). Zlatý akcent --gold (#F2C14E) len na drobnosti: čísla krokov, bodky pred otázkami, mozaika a symbol, jemne zlaté rámčeky v článkoch; text na zlatej je vždy tmavý (--gold-ink). */
:root,
[data-paleta="fialova"] {
  --bg: #FBFAFE;
  --surface: #FFFFFF;
  --ink: #15121F;           /* hlavný text (17,8:1) */
  --ink-soft: #4F4A63;      /* vedľajší text (8,1:1) */
  --line: #E6E2F0;
  --accent: #6D28D9;        /* fialová: tlačidlá, zvolené karty, odkazy (biela 7,1:1) */
  --accent-ink: #FFFFFF;
  --second: #C9B8FF;        /* levanduľová: hlavičky blokov (tmavý text 11,6:1) */
  --second-ink: #1B0F3B;
  --gold: #F2C14E;          /* zlatý akcent Z1 (tmavý text 10,6:1) */
  --gold-ink: #15121F;
  --third: #4C1D95;         /* hlboká fialová: bloky, záver (biela 11,0:1) */
  --third-ink: #FFFFFF;
}
:root,
[data-paleta] {
  --accent-soft: color-mix(in srgb, var(--accent) 11%, white);
  --second-soft: color-mix(in srgb, var(--second) 24%, white);
  --gold-soft: color-mix(in srgb, var(--gold) 20%, white);
  --third-soft: color-mix(in srgb, var(--third) 10%, white);
}

/* ---------- písma: nadpisy výrazné bezpätkové, text bezpätkový, pätkové len modlitby ---------- */
:root,
[data-pismo="bricolage"] {
  --font-head: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-pismo="manrope"] {
  --font-head: "Manrope", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- mierky, rohy, priestor ---------- */
:root {
  --fs-base: 1.125rem;      /* 18 px, minimum pre čitateľnosť */
  --fs-otazka: 1.0625rem;   /* otázky spytovania: 17 px na mobile, 18 px od 48 rem (nie menej, čitateľnosť pre seniorov) */
  --lh-base: 1.6;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --maxw-text: 42rem;
  --maxw: 66rem;
  --gutter: 1rem;
  --tien: 0 1px 2px rgb(20 22 31 / .05);
  --tien-karta: 0 6px 20px rgb(20 22 31 / .08);
  --focus: 3px solid var(--ink);
}
@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

@media (min-width: 48rem) { :root { --fs-otazka: 1.125rem; } }