/* tokens.css — jediný zdroj dizajnových tokenov URportalu.
   Načítaj VŽDY pred site.css / panel.css / designer/style.css.
   Farby, typografia a rozostupy sa menia len tu.

   Redizajn 6. 8. 2026 podľa handoffu „UR Portál — logo, ikony a dizajn stránok".
   Reč dizajnu: editoriálna a technická. Serif nadpisy, mono metadáta, vlásočnicové
   linky, ŽIADNE zaoblenia plôch a ŽIADNE tiene. Jediný akcent je oceľová modrá.

   Názvy premenných zostali z pôvodnej palety zámerne — používa ich celý web aj
   dizajnér a hromadné premenovanie by bola veľká zmena bez úžitku. Menia sa hodnoty. */

@import url('fonts.css');

:root{
  /* ---------- plochy a text ---------- */
  --paper:#ffffff;      /* plocha stránky */
  --paper-2:#f7f9fa;    /* plocha editora, karty katalógu */
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#1b2127;        /* text, silueta ikon, hlavná deliaca linka, tmavé plochy */
  --ink-2:#232b32;      /* sekundárny text, leady */
  --steel:#333c44;      /* popisy, telo v kartách */
  --steel-2:#4a555f;    /* mono metadáta, bočné poznámky */
  --muted:#333c44;      /* = steel, meno drží starší kód */
  --line:#dde2e6;       /* hairline: linky tabuliek, rámy kariet */
  --line-2:#cbd3d9;     /* hairline-2: rám obrazovky */
  --track:#d5dce1;      /* stopa metra a grafov */
  --placeholder:#94a0a9;
  --placeholder-2:#58646d;
  /* Panelový model (handoff v2): obsah NIKDY neleží priamo na ploche stránky,
     vždy je v paneli. Plocha okolo panelov je --page-bg, panel je biely. */
  --page-bg:#f2f4f6;        /* plocha stránky pod panelmi */
  --panel-head:#f7f9fa;     /* pás s názvom panela */
  --canvas-bg:#edf0f2;      /* plocha editora vnútri panela */
  --frame:#cbd3d9;          /* rám obrazovky */
  --line-strong:#cbd3d9;    /* linka pod hlavičkou tabuľky, rám neaktívneho tabu */
  --tab-bg:#f2f4f6;         /* neaktívny tab */
  --tab-line:#e4e9ec;
  --tab-hover:#e6ebee;

  /* ---------- farebné role (finálna paleta) ----------
     Neutrálny podklad, modrá UR na dátach aj akciách, farba stavu LEN tam,
     kde nesie význam. Tlačidlá nie sú nikdy čierne. */
  --ur-blue:#5c9fd6;    /* dáta, merač v strednom pásme, akcent v ikone */
  --action:#3e7fb4;     /* výplň primárneho tlačidla a aktívneho tabu */
  --action-d:#35709f;   /* hover primárneho tlačidla, farba odkazu */
  --action-line:#35709f;
  --action-bg:#cfe4f5;  /* šípka v primárnom tlačidle */
  --btn-2-line:#cbd3d9; /* rám sekundárneho tlačidla */
  --btn-2-hover:#f0f2f4;

  /* Vstup do portálu. Tmavšia modrá než --action, aby ju nebolo možné zameniť
     s aktívnym tabom, a zároveň nie ink — čierne tlačidlo v lište pôsobilo
     ako cudzí prvok. Tieň je JEDINÁ výnimka z pravidla „tiene sa nepoužívajú":
     je funkčný, robí z tlačidla jediný bod, ktorý sa opticky dvíha. */
  --cta:#27587f;
  --cta-d:#1e4767;
  --cta-glow:39,88,127;   /* RGB zložky --cta pre rgba() v tieni */

  --accent:#5c9fd6;     /* meno drží starší kód — mieri na DÁTA */
  --accent-d:#3f82ba;
  --accent-bg:#eef4fa;

  --brand:#3e7fb4;      /* meno drží starší kód — mieri na AKCIU */
  --brand-d:#35709f;
  --brand-l:#8fbde4;
  --brand-bg:#eef4fa;

  /* ---------- stavové farby ----------
     Na rozdiel od predošlých verzií tu farba stav NESIE: merač do 35 % je ok,
     nad 70 % warn, odstávka a chyba error. Nálepka = svetlá výplň, plný rám,
     tmavý text. */
  --ok:#3e8f63;      --ok-bg:#edf5ef;    --ok-text:#2e6b4a;
  --warn:#c8901f;    --warn-bg:#fbf3e2;  --warn-text:#8a6413;
  --error:#b23f35;   --error-bg:#faedeb; --error-text:#8c3128;
  /* staršie mená mieria na tie isté hodnoty */
  --green:#3e8f63;   --green-bg:#edf5ef; --green-text:#2e6b4a;
  --amber:#c8901f;   --amber-bg:#fbf3e2; --amber-text:#8a6413;
  --red:#b23f35;     --red-bg:#faedeb;   --red-text:#8c3128;
  --royal:#1b2127;   --royal-d:#1b2127;  --royal-l:#48535e; --royal-bg:#f7f9fa;

  --state:#3e8f63;   --state-bg:#edf5ef; --state-text:#2e6b4a;

  /* ---------- graf ---------- */
  --chart-bar:#dde2e6;      /* posledný stĺpec dostáva --accent */

  /* ---------- typografia ---------- */
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;

  --h1:40px;            /* podstránky 36px — viď --h1-sub */
  --h1-sub:36px;
  --h2:24px;
  --lead:15px;         /* lead je od v2 Plex Sans, nie serif */
  --text:14px;
  --meta:10.5px;        /* mono, UPPERCASE, letter-spacing 0.18em */
  --nav:11px;           /* mono, UPPERCASE, letter-spacing 0.12em */
  --num:13px;           /* mono čísla v tabuľkách */
  --num-lg:30px;        /* veľká číselná hodnota */
  --ls-h1:-0.015em;
  --ls-meta:0.18em;
  --ls-nav:0.12em;

  /* ---------- rozostupy — 4px mriežka ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  --shell:1320px;       /* šírka obsahu */
  --topbar-h:60px;
  --pad-x:40px;         /* vodorovný padding topbaru aj tela */
  --pad-y:32px;         /* telo stránky, v2 je to 32px dookola */
  --rule-gap:34px;      /* medzera pod hlavnou deliacou linkou (staršie stránky) */
  --block-gap:24px;     /* medzera medzi PANELMI, vodorovne aj zvisle */
  --aside-w:260px;      /* bočný panel */
  --panel-pad:22px;     /* telo panela */

  /* ---------- rámy a rádiusy ---------- */
  /* Plochy a karty sú hranaté. Zaoblenie žije len v ikone HMI a v app tile. */
  --radius-sm:0;
  --radius-md:0;
  --radius-lg:0;
  --radius-xl:0;
  --radius-tile:18px;   /* app tile / favicon pri 72px = 25 % */

  /* Tiene sa nepoužívajú. Hĺbku robí linka, nie rozostrenie. */
  --shadow:none;
  --shadow-sm:none;

  /* Tlačidlá majú v2 jeden vzor: rám 2px, mono verzálky 11.5/500/0.14em.
     Primárne = výplň ink + biely text; sekundárne = biela výplň + ink rám. */
  --btn-border:1px;   /* 6b: rám je 1px a nesie ho farba akcie */
  --btn-pad:11px 18px;
  --btn-size:11.5px;
  --btn-ls:.14em;

  --focus:#3e7fb4;
  --tap:44px;           /* min. veľkosť interaktívneho cieľa na webe */
}

/* ---------- základ ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-sans);
  font-size:var(--text);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
/* Serif je vyhradený IBA pre H1 stránky. Portál nemá vyzerať ako dokument,
   ale ako nástroj — všetko ostatné je Plex Sans alebo Plex Mono. */
h1{ font-family:var(--font-serif); font-weight:600; letter-spacing:var(--ls-h1); }
h2,h3,h4{ font-family:var(--font-sans); font-weight:600; letter-spacing:-.01em; }
code,kbd,samp,pre{ font-family:var(--font-mono); }

/* Mono metadáta — eyebrow nad nadpisom, hlavičky tabuliek, bočné poznámky. */
.meta{
  font-family:var(--font-mono);
  font-size:var(--meta);
  letter-spacing:var(--ls-meta);
  text-transform:uppercase;
  color:var(--steel-2);
}
/* Čísla v tabuľkách: tabulárne, vpravo. */
.num{ font-family:var(--font-mono); font-size:var(--num); font-variant-numeric:tabular-nums; text-align:right; }

/* Hlavná deliaca linka pod leadom — 1px ink, nie hairline. Je to jediná silná
   linka na stránke a drží celú kompozíciu. */
.rule{ border:0; border-top:1px solid var(--ink); margin:0 0 var(--rule-gap); }

/* ---------- viditeľný focus pre klávesnicu ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* ---------- preskakovací odkaz ---------- */
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{
  left:var(--space-4); top:var(--space-4); z-index:200;
  background:var(--ink); color:#fff; font-weight:500;
  font-family:var(--font-mono); font-size:var(--nav);
  letter-spacing:var(--ls-nav); text-transform:uppercase;
  padding:var(--space-3) var(--space-4);
}

/* ---------- prechody ---------- */
/* Handoff: len color/background/border-color, 120 ms. Žiadne posuny, žiadne
   fade-in-up pri načítaní, žiadne skeleton shimmery. */
a,button,.tile,.row{ transition:color .12s ease-out, background-color .12s ease-out, border-color .12s ease-out; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}