/* ===========================================================================
   gamingguru.eu — dizajnové tokeny
   ---------------------------------------------------------------------------
   Jediné miesto, kde sú zapísané hodnoty rozostupov, veľkostí písma, farieb,
   tieňov a rámov. Stránky sú písané inline štýlmi, ale inline štýl smie
   používať var(), takže sa na tieto tokeny vie odvolať odkiaľkoľvek.

   Pravidlo: v stránkach nemá byť natvrdo zapísaná žiadna hodnota, ktorá tu
   má svoj token. Keď treba niečo doladiť, mení sa to tu — nie sedemkrát.
   =========================================================================== */

:root {
  /* --- Rozostupy ---------------------------------------------------------
     Pozadie má mriežku 24 × 24 px. Škála je jej delenie a násobky, takže
     hrany obsahu padajú na linky mriežky namiesto vedľa nich. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* Rozostupy sekcií listu — vodorovne rovnako vľavo aj vpravo,
     zvisle menej hore a viac dole, aby sekcie mali spoločný rytmus. */
  --pad-x: var(--s-6);
  --pad-top: var(--s-6);
  --pad-bottom: var(--s-8);
  --pad-first: var(--s-8);

  /* --- Veľkosti písma ----------------------------------------------------
     Bez polpixelov: renderujú sa nekonzistentne a rozdiel medzi 13 a 13.5
     nenesie žiadnu informáciu. */
  --t-micro: 11px;   /* mono, len verzálky, nikdy vetný text */
  --t-meta: 12px;    /* mono meta, popisky */
  --t-ui: 13px;      /* tlačidlá, drobné popisy */
  --t-body: 15px;    /* bežný text */
  --t-lead: 17px;    /* názvy kariet, úvodné vety */
  --t-h2: 22px;      /* nadpis sekcie */
  --t-claim-s: 30px; /* hlavný claim na mobile */
  --t-claim: 38px;   /* hlavný claim na desktope */
  --t-h1: 44px;

  /* --- Riadkovanie -------------------------------------------------------
     Tri hodnoty stačia. Display tesne, názvy stredne, čítaný text voľne. */
  --lh-display: 1.1;
  --lh-title: 1.3;
  --lh-body: 1.5;

  /* --- Písma ------------------------------------------------------------- */
  --f-display: 'Jersey 25', 'Instrument Sans', sans-serif;
  --f-text: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Jersey 25 je pixelové písmo — v malých veľkostiach potrebuje viac
     preloženia než vo veľkých, inak sa písmená zlievajú. */
  --ls-display-s: 0.06em;   /* ≤ 14px */
  --ls-display-m: 0.03em;   /* 20–24px */
  --ls-display-l: 0.01em;   /* ≥ 38px */
  --ls-mono: 0.06em;

  /* --- Plochy ------------------------------------------------------------ */
  --paper: #FAFAF7;    /* list */
  --paper-hi: #FFFFFF; /* nadvihnutá plocha a text na tmavom */
  --ground: #EEF0EE;   /* pozadie stránky s mriežkou */
  --fill: #EFF1EE;     /* najjemnejšia výplň vnútri listu */
  --fill-2: #E9ECE8;   /* výraznejšia výplň (bočná lišta, hlavičky tabuliek) */

  /* --- Text --------------------------------------------------------------
     Chladná škála, aby text nebol voči #EEF0EE a #FAFAF7 dohneda.
     Všetky štyri stupne majú na papieri aspoň 4.5:1. */
  --ink: #14161C;      /* 17.3:1 */
  --ink-2: #3A3E45;    /* 10.3:1 */
  --ink-3: #5E636B;    /*  5.8:1 */
  --ink-4: #6B7078;    /*  4.8:1 — najslabší, ktorý ešte prejde */

  /* --- Delenie -----------------------------------------------------------
     Tri hrúbky a nič medzi tým. */
  --line: #D5D9D3;             /* delenie vnútri sekcie */
  --line-strong: var(--ink);   /* delenie sekcií a rám listu */
  --hair: 1px;
  --rule: 1.5px;               /* rám listu */
  --accent-bar: 4px;           /* akcentový pruh — jediná „hrubá" hodnota */

  /* --- Akcent a stavy ----------------------------------------------------
     Purpurová je jediná interaktívna farba: odkaz, hover, focus, aktívny
     stav. Sekčné farby nesmú byť použité na interakciu, inak sa tento
     signál stratí. */
  --accent: #5937C8;
  --accent-fill: #F0EDFB;

  /* --- Sekčné farby ------------------------------------------------------
     Každá má dva varianty. `ink` je stmavená na kontrast aspoň 4.5:1 na
     papieri a používa sa na text (mono label `// 0X`). `fill` je pôvodný
     svetlejší odtieň a používa sa len ako plocha alebo pruh, kde na
     kontraste textu nezáleží. */
  --sluzby-ink: #C2410C;      /* 4.95:1 */
  --sluzby-fill: #E8571E;
  --projekty-ink: #5937C8;    /* 7.16:1 */
  --projekty-fill: #5937C8;
  --vyskum-ink: #B02463;      /* 6.13:1 */
  --vyskum-fill: #D63A7A;
  --studenti-ink: #1D4FB8;    /* 7.01:1 */
  --studenti-fill: #2B6CE6;
  --omne-ink: #5937C8;        /* zjednotené s akcentom, bolo #6541b5 */
  --omne-fill: #6541b5;
  --kontakt-ink: #8A6300;     /* 5.20:1 */
  --kontakt-fill: #E0A800;
  --lab-ink: #2E7D3A;         /* 4.89:1 */
  --lab-fill: #3FA34D;

  /* --- Sémantické farby --------------------------------------------------
     Nie sú to jednorazové odchýlky, ale nositelia významu: stav publikácie
     vo Výskume a potvrdenie po skopírovaní kontaktu. Obidve textové hodnoty
     na papieri prechádzajú, takže sa zachovávajú tak, ako sú. */
  --status-research: #0B796F;  /* umelecký výskum · 5.05:1 */
  --status-service: #816116;   /* akademická služba · 5.49:1 */
  --ok-fill: #CFE8D4;          /* plocha po úspešnom skopírovaní */

  /* --- Tiene -------------------------------------------------------------
     Dva stupne, oba tvrdé bez rozostrenia. Kruhové prstence (0 0 0 Npx)
     patria stavom, nie dekorácii. */
  --shadow-card: 4px 4px 0 var(--ink);
  --shadow-sheet: 8px 8px 0 var(--accent);

  /* --- Zaoblenie ---------------------------------------------------------
     Estetika je ostrohranná a pixelová. Nula všade; výnimkou sú kruhové
     indikátory, ktoré si 50 % nesú samy. */
  --radius: 0;

  /* --- Hlavička a odsadenie kotiev ---------------------------------------
     Jedna hodnota výšky a jeden bezpečný odstup, aby skok na kotvu
     neskončil pod lepiacou hlavičkou. --hdr prepisuje JavaScript podľa
     skutočnej výšky, lebo na úzkych displejoch sa hlavička zalamuje. */
  --hdr: 60px;
  --safe: calc(var(--hdr) + var(--s-3));
}

/* ---------------------------------------------------------------------------
   Univerzálne správanie, ktoré patrí k tokenom
   --------------------------------------------------------------------------- */

/* Čísla nesmú pri prepínaní poskakovať — roky, počty, počítadlá. */
[data-num],
[data-reel-foot],
time {
  font-variant-numeric: tabular-nums;
}

/* Prstenec funguje na svetlom aj tmavom podklade: svetlé jadro oddelí
   purpurový prstenec od tmavého tlačidla, na svetlom splynie s papierom. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--accent);
  border-radius: var(--radius);
}

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