/* ═══ MRAZ — spoločný dizajnový systém „Aurora sklo“ (3.10.2026) ═══
   JEDINÝ ZDROJ: 005resources/mraz-dizajn/mraz/mraz.css → rozdaj.sh kopíruje celý priečinok mraz/ do appiek.
   Kópie v appkách NEUPRAVUJ (rozdaj.sh --over ich porovná so zdrojom a pri rozdiele vráti exit 1).

   Téma: jeden blok tokenov cez light-dark(); o téme rozhoduje color-scheme:
     bez atribútu / data-tema="system"        → podľa systému
     data-tema="svetla" | "svetly"             → svetlá
     data-tema="tmava"  | "tmavy"              → tmavá
   Farba appky: --appka (každá appka si ju nastaví v :root, Domov ju mení podľa aktívnej karty).
   Veľkosť písma: --fs (1 alebo 1.18; Domov posiela {mraz:"pismo"}). */

/* ── písma (SIL OFL 1.1, self-hosted, variabilné 300–700; licencie: fonty/OFL-Inter.txt, fonty/OFL-SpaceGrotesk.txt) ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonty/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonty/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonty/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonty/space-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --appka ako registrovaná farba → zmena farby appky (prepnutie karty) sa plynulo prelieva aj v aurore */
@property --appka { syntax: "<color>"; inherits: true; initial-value: #7DD3FC; }
:root { transition: --appka var(--t-pomaly, .48s) var(--ease, ease); }

/* ── téma ── */
:root { color-scheme: light dark; }
:root[data-tema="svetla"], :root[data-tema="svetly"] { color-scheme: light; }
:root[data-tema="tmava"], :root[data-tema="tmavy"] { color-scheme: dark; }

/* ── tokeny ── */
:root {
  --appka: #7DD3FC;
  --fs: 1;

  /* plochy */
  --pozadie: light-dark(#EEF1F7, #06080E);
  --plocha: light-dark(#FFFFFF, #0D121D);
  --plocha-2: light-dark(#F6F8FC, #121827);
  --riadok: light-dark(#ECEFF6, #182033);
  --hrana: light-dark(rgba(15, 23, 42, .09), rgba(255, 255, 255, .075));
  --hrana-silna: light-dark(rgba(15, 23, 42, .16), rgba(255, 255, 255, .14));
  --odlesk: light-dark(rgba(255, 255, 255, .9), rgba(255, 255, 255, .07));   /* horná hrana skla */

  /* text */
  --text: light-dark(#0D1424, #EEF2F9);
  --tlmene: light-dark(#53607A, #8E9AB1);
  --slabe: light-dark(#5F6B84, #8490A6);            /* ≥ 4.5:1 na pozadí, ploche aj riadku (WCAG AA, oprava 3.10.) */

  /* akcent appky — vo svetlej téme stmavený tak, aby text v --akcent mal ≥ 4.5:1 na pozadí/ploche/riadku aj na 13 % tóne
     akcentu, pre všetky farby appiek (#60A5FA #A78BFA #C084FC #34D399 #7DD3FC #38BDF8; namerané min. 4.81).
     --akcent-2 vo svetlej téme drží biely text na --grad ≥ 4.5 (min. 4.93). */
  --akcent: light-dark(color-mix(in oklch, var(--appka) 40%, #0B1A4A), var(--appka));
  --akcent-2: light-dark(color-mix(in oklch, var(--appka) 35%, #3730A3), color-mix(in oklch, var(--appka) 55%, #A78BFA));
  --na-akcente: light-dark(#FFFFFF, #050A14);
  --grad: linear-gradient(135deg, var(--akcent) 0%, var(--akcent-2) 100%);
  --grad-text: linear-gradient(100deg, var(--text) 10%, var(--akcent) 60%, var(--akcent-2) 100%);

  /* stavy */
  --ok: light-dark(#059669, #34D399);
  --pozor: light-dark(#B45309, #FBBF24);
  --alarm: light-dark(#DC2626, #F87171);
  --info: light-dark(#0284C7, #7DD3FC);
  --nezname: light-dark(#94A3B8, #64748B);
  /* stavy ako TEXT (malé písmo, odznaky): ≥ 4.5:1 aj na 13–18 % tóne vlastnej farby */
  --ok-text: light-dark(#065F46, #34D399);
  --pozor-text: light-dark(#92400E, #FBBF24);
  --alarm-text: light-dark(#A61B1B, #FCA5A5);
  --info-text: light-dark(#0369A1, #7DD3FC);

  /* sklo */
  --sklo-bg: light-dark(rgba(255, 255, 255, .72), rgba(13, 18, 29, .62));
  --sklo-hrana: light-dark(rgba(15, 23, 42, .08), rgba(255, 255, 255, .09));
  --sklo-blur: saturate(170%) blur(22px);
  /* husté sklo pre lišty a tabbary: text pod lištou nesmie presvitať čitateľne */
  --sklo-bg-husta: light-dark(rgba(246, 248, 252, .93), rgba(10, 14, 23, .9));
  --sklo-blur-husta: saturate(160%) blur(30px);

  /* tiene + žiara (light-dark berie len farby → farby tieňov zvlášť) */
  --tien-f1: light-dark(rgba(15, 23, 42, .08), rgba(0, 0, 0, .5));
  --tien-f2: light-dark(rgba(15, 23, 42, .20), rgba(0, 0, 0, .72));
  --tien-f3: light-dark(rgba(15, 23, 42, .30), rgba(0, 0, 0, .88));
  --tien-1: 0 1px 2px var(--tien-f1), 0 6px 16px -6px var(--tien-f1);
  --tien-2: 0 18px 40px -14px var(--tien-f2);
  --tien-3: 0 40px 90px -30px var(--tien-f3);
  --ziara: 0 0 0 1px color-mix(in srgb, var(--akcent) 38%, transparent),
           0 10px 34px -8px color-mix(in srgb, var(--akcent) 48%, transparent);

  /* aurora: sila farieb podľa témy */
  --aurora-1: light-dark(color-mix(in srgb, var(--appka) 26%, transparent), color-mix(in srgb, var(--appka) 48%, transparent));
  --aurora-2: light-dark(color-mix(in srgb, #818CF8 18%, transparent), color-mix(in srgb, #8B5CF6 36%, transparent));
  --aurora-3: light-dark(color-mix(in srgb, var(--appka) 12%, transparent), color-mix(in srgb, #22D3EE 22%, transparent));

  /* škály */
  --r-xs: 10px; --r-s: 16px; --r-m: 22px; --r-l: 28px; --r-kruh: 999px;
  --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 24px; --m-6: 32px; --m-7: 48px;
  --p-xs: calc(12px * var(--fs)); --p-s: calc(13.5px * var(--fs)); --p-m: calc(15.5px * var(--fs));
  --p-l: calc(18px * var(--fs)); --p-xl: calc(24px * var(--fs)); --p-xxl: calc(32px * var(--fs));
  --pismo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pismo-nadpis: "Space Grotesk", "Inter", system-ui, sans-serif;
  --pismo-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* pohyb */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-pruzina: cubic-bezier(.34, 1.36, .64, 1);
  --t-rychlo: .14s; --t-stred: .26s; --t-pomaly: .48s;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-rychlo: 0s; --t-stred: 0s; --t-pomaly: 0s; }
}

/* ── AURORA: jedna fixná vrstva za obsahom; mäkké radiálne gradienty (bez filter:blur), hýbe sa len transform ── */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict;
  background: var(--pozadie); }
.aurora::before, .aurora::after { content: ""; position: absolute; inset: -30%; will-change: transform; }
.aurora::before {
  background:
    radial-gradient(38% 32% at 22% 18%, var(--aurora-1) 0%, transparent 70%),
    radial-gradient(34% 30% at 82% 26%, var(--aurora-2) 0%, transparent 70%),
    radial-gradient(42% 36% at 60% 88%, var(--aurora-3) 0%, transparent 72%);
  animation: aurora-a 38s ease-in-out infinite alternate;
  transition: background var(--t-pomaly) var(--ease);
}
.aurora::after {
  /* jemné zrno — prémiový dojem, bráni pásikovaniu gradientu */
  inset: 0; opacity: .045;   /* bez mix-blend-mode: pri animovaných vrstvách nad ním kreslil Chrome/Safari obdĺžniky */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aurora-a {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.02); }
}
.aurora.stoji::before, .bez-pohybu .aurora::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aurora::before { animation: none; } }

/* ── SKLO ── */
.sklo { background: var(--sklo-bg); border: 1px solid var(--sklo-hrana);
  -webkit-backdrop-filter: var(--sklo-blur); backdrop-filter: var(--sklo-blur);
  box-shadow: inset 0 1px 0 var(--odlesk), var(--tien-2); }
.sklo.husta, .m-lista { background: var(--sklo-bg-husta); -webkit-backdrop-filter: var(--sklo-blur-husta); backdrop-filter: var(--sklo-blur-husta); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sklo, .sklo.husta, .m-lista { background: var(--plocha); }
}

/* ── komponenty ── */
.m-karta { background: color-mix(in srgb, var(--plocha) 86%, transparent); border: 1px solid var(--hrana);
  border-radius: var(--r-m); box-shadow: inset 0 1px 0 var(--odlesk), var(--tien-1);
  transition: border-color var(--t-stred) var(--ease), box-shadow var(--t-stred) var(--ease), transform var(--t-stred) var(--ease); }
@media (hover: hover) {
  .m-karta.m-ziari:hover { border-color: color-mix(in srgb, var(--akcent) 40%, var(--hrana)); box-shadow: inset 0 1px 0 var(--odlesk), var(--ziara); }
}

.m-tlacidlo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 18px; border-radius: var(--r-kruh); border: 1px solid var(--hrana-silna); background: var(--plocha-2);
  color: var(--text); font: 600 var(--p-m)/1 var(--pismo); cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--t-rychlo) var(--ease), background-color var(--t-stred) var(--ease),
              border-color var(--t-stred) var(--ease), box-shadow var(--t-stred) var(--ease); }
.m-tlacidlo:hover { border-color: color-mix(in srgb, var(--akcent) 45%, var(--hrana-silna)); }
.m-tlacidlo:active { transform: scale(.96); }
.m-tlacidlo:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.m-tlacidlo:disabled { opacity: .45; cursor: default; transform: none; }
.m-tlacidlo.hlavne { background: var(--grad); color: var(--na-akcente); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--ziara); }
.m-tlacidlo.tiche { background: transparent; border-color: transparent; color: var(--tlmene); }
.m-tlacidlo.tiche:hover { background: var(--riadok); color: var(--text); }
.m-tlacidlo.zle { background: transparent; color: var(--alarm-text); border-color: color-mix(in srgb, var(--alarm) 45%, transparent); }
.m-tlacidlo svg, .m-ikona { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.m-cip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-kruh);
  background: var(--riadok); color: var(--tlmene); border: 1px solid var(--hrana); font: 600 var(--p-s)/1 var(--pismo); }
.m-cip.aktivny, .m-cip[aria-pressed="true"] { color: var(--akcent); border-color: color-mix(in srgb, var(--akcent) 45%, transparent);
  background: color-mix(in srgb, var(--akcent) 13%, transparent); }

.m-okno { background: var(--sklo-bg); color: var(--text); border: 1px solid var(--sklo-hrana); border-radius: var(--r-l);
  -webkit-backdrop-filter: var(--sklo-blur); backdrop-filter: var(--sklo-blur);
  box-shadow: inset 0 1px 0 var(--odlesk), var(--tien-3); }
.m-okno::backdrop { background: light-dark(rgba(15, 23, 42, .35), rgba(2, 4, 10, .6));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes m-vyskoc { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.m-okno[open], .m-vyskoc { animation: m-vyskoc var(--t-stred) var(--ease-pruzina); }

.m-nadpis { font-family: var(--pismo-nadpis); font-weight: 700; letter-spacing: -.02em; }
.m-gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-cislo { font-family: var(--pismo-nadpis); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.m-bod { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--nezname); }
.m-bod.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent), 0 0 12px color-mix(in srgb, var(--ok) 70%, transparent); }
.m-bod.pozor { background: var(--pozor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pozor) 20%, transparent), 0 0 12px color-mix(in srgb, var(--pozor) 70%, transparent); }
.m-bod.alarm { background: var(--alarm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alarm) 20%, transparent), 0 0 12px color-mix(in srgb, var(--alarm) 70%, transparent); }

/* shimmer pre skeletony */
.m-shimmer { position: relative; overflow: hidden; background: var(--riadok); }
.m-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  animation: m-shimmer 1.4s var(--ease) infinite; }
@keyframes m-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .m-shimmer::after { animation: none; } }

/* ikony zo spritu: <svg class="m-ikona"><use href="/mraz/ikony.svg#zavriet"/></svg> */