/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS v2
   Zdroj: cosmos.html
   Použitie: <link rel="stylesheet" href="/design-tokens-v2.css">
   ⚠ Nemeňte bez súhlasu — zmena ovplyvní všetky projekty

   Zmeny oproti v1:
   - Typografia: namiesto samotných --fs-* veľkostí
     sú tu kompletné .t-* triedy (size + weight + transform + spacing)
   - Staré --fs-* premenné zachované pre spätnú kompatibilitu
═══════════════════════════════════════════════════════ */

:root {
  /* ═══ PALETA ═══ */
  --_a:         139, 92, 246;   /* accent RGB */
  --_a2:        109, 40, 217;   /* accent-dark RGB */
  --_bg-rgb:    5, 5, 16;       /* bg RGB pre overlay */
  --_re-rgb:    239, 68, 68;    /* red RGB */
  --_gr-rgb:    16, 185, 129;   /* green RGB */
  --_cy-rgb:    6, 182, 212;    /* cyan RGB */
  --_white-rgb: 255, 255, 255;  /* white RGB */
  --_black-rgb: 0, 0, 0;        /* black RGB */

  /* ═══ SÉMANTIKA ═══ */
  --bg:         #050510;
  --bg-float:   #0d0d22;
  --bg-overlay: rgba(var(--_bg-rgb), var(--op-8));
  --white:      #fff;
  --p:          rgb(var(--_a));
  --p2:         rgb(var(--_a2));
  --px:         rgba(var(--_a), var(--op-1));
  --pg:         rgba(var(--_a), var(--op-3));
  --cy:         #06b6d4;
  --gr:         #10b981;
  --grd:        rgba(var(--_gr-rgb),0.12);
  --re:         #ef4444;
  --re2:        #b91c1c;
  --t1:         #f8f8ff;
  --t2:         #9090a8;
  --t3:         #606078;
  --ln:         rgba(var(--_white-rgb),0.07);
  --lnh:        rgba(var(--_white-rgb),0.14);
  --s1:         rgba(var(--_white-rgb),0.03);
  --s2:         rgba(var(--_white-rgb),0.06);
  --tog-off:    rgba(var(--_white-rgb),0.08);
  --canvas-op:  0.5;
  --logo-from:  var(--white);

  /* ═══ TYPOGRAFIA — primitívy ═══
     Tieto premenné sa používajú vnútri .t-* tried.
     Priamo v kóde ich nepoužívaj — použi .t-* triedu. */
  --font:    'Inter', system-ui, sans-serif;
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-lg:   18px;
  --lh-base:    1.5;
  --lh-relaxed: 1.6;
  --ls-tight: -0.5px;
  --ls-md:     0.5px;
  --ls-lg:     1px;

  /* ═══ BORDER RADIUS ═══ */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;

  /* ═══ SPACING — UI komponenty ═══ */
  --sp-0:  2px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;

  /* ═══ SPACING — prezentačné sekcie ═══
     ⚠ Len pre landing/corporate stránky — nie pre UI aplikácie */
  --sec-1:  24px;   /* medzera medzi elementmi v sekcii */
  --sec-2:  48px;   /* medzera medzi blokmi */
  --sec-3:  80px;   /* padding menšej sekcie */
  --sec-4: 120px;   /* padding hlavnej sekcie */

  /* ═══ VEĽKOSTI KOMPONENTOV ═══ */
  --h-control: 33px;
  --sz-sm:     18px;   /* checkbox, radio */
  --sz-md:     26px;   /* nav avatar */
  --sz-lg:     28px;   /* logo gem, modal close */
  --sz-xl:     40px;   /* modal ikona */
  --tog-w:     34px;
  --tog-h:     20px;
  --tog-thumb: 14px;

  /* ═══ ŠÍRKY ═══ */
  --w-xs:  80px;
  --w-sm:  180px;
  --w-md:  280px;
  --w-lg:  480px;
  --w-xl:  680px;

  /* ═══ ŠÍRKY MODÁLNYCH OKIEN ═══ */
  --modal-sm:  320px;
  --modal-md:  520px;
  --modal-lg:  720px;
  --modal-xl:  920px;
  --modal-2xl: 1120px;

  /* ═══ GLOW / SHADOW ═══ */
  --glow-sm:  8px;
  --glow-md:  20px;
  --glow-lg:  40px;
  --glow-xl:  80px;

  /* ═══ OPACITY ═══ */
  --op-1: 0.10;
  --op-3: 0.30;
  --op-5: 0.50;
  --op-8: 0.80;

  /* ═══ BORDER ═══ */
  --bw: 1px;

  /* ═══ ANIMÁCIE — trvanie ═══ */
  --dur-instant: 0.1s;   /* btn:active, rýchle hover */
  --dur-base:    0.2s;   /* väčšina prechodov */
  --dur-slow:    0.3s;   /* pomalé efekty */
  --dur-slower:  0.5s;   /* návrat 3D tilt */
  --dur-1:       1.0s;
  --dur-2:       1.5s;
  --dur-3:       2.0s;
  --dur-4:       2.5s;
  --dur-5:       3.0s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ═══ Z-INDEX ═══ */
  --z-base:  1;
  --z-float: 100;   /* nav, dropdown */
  --z-modal: 200;   /* modal overlay */
  --z-top:   300;   /* theme switcher */
  --z-drag:  999;   /* drag & drop */

  /* ═══ INTERAKČNÉ KONŠTANTY ═══ */
  --check-angle:   -45deg;
  --btn-press:     scale(0.96);
  --arrow-rotate:  rotate(180deg);
  --tab-underline: calc(var(--bw) * -1);
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAFICKÉ TRIEDY
   11 kompletných textových štýlov z cosmos.html.
   Každá trieda = veľkosť + hrúbka + transform + spacing.
   Farbu NEDEFINUJÚ — tú nastavuje komponent.
═══════════════════════════════════════════════════════

   PREHĽAD:
   ┌─────────────┬────────┬────────┬───────────┬─────────┐
   │ Trieda       │ Veľkosť│ Weight │ Transform │ Spacing │
   ├─────────────┼────────┼────────┼───────────┼─────────┤
   │ .t-label     │ xs 10  │ 700    │ UPPERCASE │ lg 1px  │
   │ .t-tag       │ xs 10  │ 800    │ UPPERCASE │ lg 1px  │
   │ .t-badge     │ xs 10  │ 800    │ UPPERCASE │ md 0.5  │
   │ .t-hint      │ sm 12  │ 400    │ —         │ —       │
   │ .t-status    │ sm 12  │ 600    │ —         │ —       │
   │ .t-avatar    │ sm 12  │ 800    │ —         │ —       │
   │ .t-chip      │ sm 12  │ 800    │ UPPERCASE │ lg 1px  │
   │ .t-body      │ base14 │ 400    │ —         │ —       │
   │ .t-medium    │ base14 │ 500    │ —         │ —       │
   │ .t-strong    │ base14 │ 600    │ —         │ —       │
   │ .t-title     │ base14 │ 700    │ —         │ —       │
   └─────────────┴────────┴────────┴───────────┴─────────┘
*/

/* ── 1. LABEL ──
   Najmenší text na stránke. Vždy uppercase, vždy popisuje ČO je
   vedľa neho alebo pod ním. Nikdy nestojí sám — vždy má vedľa
   seba hodnotu (.t-title) alebo kontrolku (input, dropdown).

   Rozhodovací test:
   → Odpovedá text na otázku "čo to je?" pre vec vedľa/pod ním?
   → Je to popis, nie samotná hodnota?
   → Zmizol by a user by nevedel čo tá hodnota znamená?
   Ak áno → .t-label

   Cosmos: PROFIL, HRÁČI ONLINE, MAIN CALLER, PARTY CALLER,
           ROOMKY, form <label>, <th> v tabuľke, TÉMA,
           section-title (ZAŠKRTÁVACIE POLIA, ROZBAĽOVACIE ZOZNAMY)
   dkp-tl: tab section headers, form labels, table <th>,
           DKP panel labels                                       */
.t-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-lg);
}

/* ── 2. TAG ──
   Názov kontajnera, miesta alebo entity. Podobný label-u ale
   IDENTIFIKUJE (pomenúva), nepopisuje. Ťažší (800) než label (700)
   aby vizuálne vynikol ako nadpis malého boxu.

   Rozhodovací test:
   → Je to názov "krabice" v ktorej sú ďalšie veci?
   → Keby som ho odstránil, nevedel by user AKÝ box pozerá?
   Ak áno → .t-tag

   Cosmos: ROOM 1, ROOM 2, ROOM 3, ROOM 4, ROOM 5
   dkp-tl: voice channel names, group headers                    */
.t-tag {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-lg);
}

/* ── 3. BADGE ──
   Krátka skratka (1-4 znaky) vedľa názvu. Rozlišuje typ alebo rolu.
   Vždy farebné pozadie. Menší letter-spacing (md) než tag/label (lg)
   pretože je to veľmi krátky text a lg by ho príliš roztiahol.

   Rozhodovací test:
   → Je to 1-4 znaková skratka?
   → Má farebné pozadie a sedí VEDĽA iného textu?
   → Hovorí ČÍM/AKÝ je ten element, nie KDE je?
   Ak áno → .t-badge

   Cosmos: MC, PC (vedľa Room názvu)
   dkp-tl: role badges, rarity tags                               */
.t-badge {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-md);
}

/* ── 4. HINT ──
   Doplnkový text ktorý user NEMUSÍ čítať, ale AK chce, pomôže mu.
   Vždy pod alebo vedľa hlavného textu. Nikdy nestojí sám.
   Farba typicky --t2 (sivá) — nastavuje komponent, nie trieda.

   Rozhodovací test:
   → Keby som text skryl, pochopil by user stále hlavný obsah?
   → Je to vysvetlenie, nie akcia ani hodnota?
   Ak áno → .t-hint

   Cosmos: "Roomky počujú Main Callera", "Caller počuje reporterov",
           "Funkcia nie je dostupná", "Všetky roomky počujú callera"
   dkp-tl: checkbox/toggle popisy, helper text pod inputmi,
           "Available: 1500 DKP", countdown texty                 */
.t-hint {
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* ── 5. STATUS ──
   Krátky stavový text, typicky v pill/badge kontajneri s ikonkou
   (bodka, spinner). Informuje o AKTUÁLNOM stave niečoho.
   Ťažší než hint (600 vs 400) lebo stav je dôležitejší než popis.

   Rozhodovací test:
   → Informuje text o AKTUÁLNOM stave systému/entity?
   → Je v pill/badge kontajneri s vizuálnym indikátorom?
   → Mení sa dynamicky (online→offline, 3→5)?
   Ak áno → .t-status

   Cosmos: "Bot online" (zelený pill s bodkou)
   dkp-tl: "Online", počet aktívnych, plan badge text             */
.t-status {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ── 6. AVATAR ──
   Jedno písmeno (iniciálka) v kruhovom placeholder kontajneri.
   Najťažší weight (800) aby bol viditeľný v malom kruhu.
   Použitie je veľmi špecifické — LEN v avatar kruhoch.

   Rozhodovací test:
   → Je to 1 písmeno v kruhu?
   Ak áno → .t-avatar

   Cosmos: "A" (v nav avatar kruhu)
   dkp-tl: avatar placeholdery v user listoch                     */
.t-avatar {
  font-size: var(--fs-sm);
  font-weight: 800;
}

/* ── 7. CHIP ──
   Stav alebo kategória vo väčšom badge ako .t-badge.
   Uppercase + ťažký weight ako badge, ale väčší (sm vs xs).
   Typicky farebné pozadie a/alebo border, stojí vo výraznej
   pozícii (header karty, top bar).

   Rozhodovací test:
   → Je to krátke slovo (1-10 znakov) ktoré klasifikuje stav/typ?
   → Je väčšie a výraznejšie než badge?
   → Stojí na prominentnom mieste (header, top bar)?
   Ak áno → .t-chip

   Cosmos: "LIVE" (v session top bar s pulzujúcou bodkou)
   dkp-tl: auction status badges, tier chipy                      */
.t-chip {
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-lg);
}

/* ── 8. BODY ──
   Default text. Všetko čo nemá špeciálnu rolu. Dáta v tabuľke,
   options v dropdowne, text v modal body, mená v zozname.
   Toto je "neutrálny" text — neupozorňuje, nepopisuje,
   jednoducho prezentuje obsah.

   Rozhodovací test:
   → Je to bežný obsah bez špeciálnej roly?
   → Nepotrebuje zvýraznenie, popis ani akciu?
   → Je to "data" — hodnota v tabuľke, položka v liste?
   Ak áno → .t-body (alebo žiadna trieda, body je default)

   Cosmos: mená v room listoch (Jaafy, Lajtee, Mirko),
           tabuľkové bunky (Raid 60, 1h 23m, dnes),
           dropdown options, modal body text
   dkp-tl: rovnaké — tabuľky, zoznamy, dropdown options           */
.t-body {
  font-size: var(--fs-base);
  font-weight: 400;
}

/* ── 9. MEDIUM ──
   Text vedľa interaktívnej kontrolky. User naň nekliká priamo
   (to robí kontrolka vedľa), ale text pomenúva tú kontrolku.
   O niečo ťažší (500) než body (400), aby bolo vidieť že
   "patrí" ku kontrolke a nie je len bežný text.

   Rozhodovací test:
   → Je text VEDĽA checkboxu, toggleu, radio buttonu alebo tabu?
   → Pomenúva ten text kontrolku?
   → Nie je to akcia (button), ale pasívny label?
   Ak áno → .t-medium

   VÝNIMKA: aktívny tab sa mení na .t-strong (600)

   Cosmos: tab labels (Profily, Používatelia, Logy, Nastavenia),
           checkbox labels (Caller broadcast aktívny),
           toggle labels (Caller broadcast, Party Caller aktívny),
           radio labels (Main Caller, Party Caller, Žiadna rola),
           guild button text (ESCA Gaming)
   dkp-tl: rovnaké — tab labels, checkbox/toggle/radio labels     */
.t-medium {
  font-size: var(--fs-base);
  font-weight: 500;
}

/* ── 10. STRONG ──
   Text ktorý je dôležitý A reprezentuje akciu alebo kľúčovú entitu.
   Ťažší než medium (600 vs 500). Dve hlavné použitia:
   a) Text na TLAČIDLE — akcia ktorú user vykoná
   b) Zvýraznené MENO osoby — keď je dôležité kto to je
   c) Aktívny tab — keď tab zmení stav z .t-medium na vybraný

   Rozhodovací test:
   → Je to text na tlačidle?
   → Je to meno osoby ktoré treba zvýrazniť (caller, owner)?
   → Je to aktívny/vybraný stav niečoho čo bolo .t-medium?
   → Je to vybraná option v dropdown/liste?
   Ak áno → .t-strong

   Cosmos: button text (Pauza, Ukončiť, Všetky →, Uložiť),
           caller mená v tabuľke (Jaafy, Lajtee — farebné),
           aktívny tab (Sessions), meno usera v nav (Adrian),
           vybraná dropdown option
   dkp-tl: rovnaké — buttony, zvýraznené mená, aktívne tabs       */
.t-strong {
  font-size: var(--fs-base);
  font-weight: 600;
}

/* ── 11. TITLE ──
   Najťažší bežný text (700). Dva účely:
   a) NADPIS sekcie/karty — text ktorý hovorí "toto je názov
      celého bloku pod ním" (Posledné sessiony, Ovládanie)
   b) HLAVNÁ HODNOTA — číslo alebo text ktorý je primárny
      dátový bod v label+value páre (Raid 60, 54/60, Jaafy)

   Rozhodovací test:
   → Je to názov celej sekcie/karty/modálu?
   → Alebo je to THE hodnota vedľa .t-label?
   → Je to to NAJDÔLEŽITEJŠIE v danom kontexte?
   Ak áno → .t-title

   POZOR: .t-title je base 14px, NIE lg 18px!
   V cosmos sú všetky titulky 14px. Veľké 18px je len logo.
   dkp-tl aktuálne používa lg 700 na modal titulky a headers
   — to treba zosúladiť na base 700.

   Cosmos: "Posledné sessiony", "Ovládanie" (section headers),
           "Nastavenia callera", "Ukončiť session?" (modal titles),
           "Raid 60", "54 / 60", "Jaafy", "Tomáš" (hodnoty v meta row),
           "5 aktívnych", "00:47:26" (timer)
   dkp-tl: section headers, modal titles, DKP hodnoty,
           auction names, countdown hodnoty                        */
.t-title {
  font-size: var(--fs-base);
  font-weight: 700;
}

/* ═══ TÉMY — ACCENT ═══ */
[data-accent="forest"] { --_a: 34, 197, 94;   --_a2: 22, 163, 74;  }
[data-accent="ember"]  { --_a: 249, 115, 22;  --_a2: 234, 88, 12;  }
[data-accent="ocean"]  { --_a: 14, 165, 233;  --_a2: 2, 132, 199;  }
[data-accent="sol"]    { --_a: 234, 179, 8;   --_a2: 202, 138, 4;  }

/* ═══ TÉMY — SVETLOSŤ ═══ */
[data-theme="light"] {
  --_bg-rgb:   240, 240, 250;
  --bg:        #f0f0fa;
  --bg-float:  #e8e8f4;
  --t1:        #0d0d22;
  --t2:        #505068;
  --t3:        #909098;
  --ln:        rgba(var(--_black-rgb),0.08);
  --lnh:       rgba(var(--_black-rgb),0.15);
  --s1:        rgba(var(--_black-rgb),0.03);
  --s2:        rgba(var(--_black-rgb),0.06);
  --grd:       rgba(var(--_gr-rgb),0.1);
  --tog-off:   rgba(var(--_black-rgb),0.08);
  --canvas-op: 0;
  --logo-from: var(--t1);
}