/* ═══════════════════════════════════════════════════════════════════════════
   JLCasino — designové tokeny

   Směr: DATOVÝ LIST. Nabídka je produkt, všechno ostatní drží hubu. Skoro
   černá plocha, plné panely s vlasovou linkou, zelená jako jediná akční
   barva a strojopis na všech štítcích a číslech. Ten strojopis je podpis
   celého vzhledu: co je údaj, to je monospace, a čte se to jako výpis,
   ne jako reklama.

   Pravidlo, na kterém stojí celý vzhled: KAŽDÁ SYTÁ BARVA MÁ JEDINÝ ÚKOL.
     zelená  = primární akce a hlavní číslo nabídky (nic jiného)
     jantar  = druhé číslo nabídky, free spiny (nic jiného)
     modrá   = doplňkový štítek (sportovní sázky a spol.)
     červená = živé vysílání (nic jiného)
   Když je na obrazovce zelená, znamená to „tady je to podstatné".
   Třetí zelená věc vedle ten význam zabije.

   Soubor má dvě části:
     1) SYSTÉM  — tokeny, ze kterých se staví nové komponenty
     2) MOSTY   — stará jména (--kt-*, --glow-*, --gradient-*…), přemapovaná
                  na systém. Díky nim se přebarví i vrstvy, které se ještě
                  nepřepisovaly, a neonové efekty se vypnou jedním tahem.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

    /* ══ 1) SYSTÉM ══════════════════════════════════════════════════════ */

    /* ── Plochy ─────────────────────────────────────────────────────────
       Pět pater, každé o kousek světlejší. Hlavička a patička jsou tmavší
       než stránka, aby obsah plaval nad nimi, ne pod nimi. */
    --bg:        #0a0b0a;   /* stránka */
    --head:      #0e100f;   /* hlavička, patička */
    --band:      #0e100f;   /* pás sekce, odděluje ji od sousední */
    --panel:     #131615;   /* karta, panel */
    --panel-hi:  #191d1b;   /* karta v hoveru */
    --raise:     #212623;   /* co leží NA kartě: pole, čip, dlaždice loga */

    /* ── Linky ──────────────────────────────────────────────────────────
       Dvě síly. Slabá odděluje uvnitř komponenty, silná ji ohraničuje. */
    --rail:      rgba(255, 255, 255, .09);
    --rail-2:    rgba(255, 255, 255, .17);

    /* ── Text ───────────────────────────────────────────────────────────
       Tři úrovně, všechny nad WCAG AA 4,5:1 na --panel. Vzor má nejtlumenější
       stupeň na #6b716c, což na téhle ploše vychází 3,8:1 — pod normou. Drží
       ho tedy o kus výš; strojopisné štítky nesou význam, ne ozdobu. */
    --paper:     #f0f2ef;   /* hlavní */
    --paper-2:   #9aa09b;   /* tlumený: popisy, sekundární odkazy */
    --paper-3:   #8d938e;   /* drobný: štítky, podmínky, právní řádek */

    /* ── Barvy s jediným úkolem ─────────────────────────────────────────
       Zelená nese akci a hlavní číslo nabídky, jantar druhé číslo (free
       spiny), modrá doplňkový štítek. Text na zelené je tmavý, ne bílý —
       bílá na #53fc18 má kontrast 1,6:1 a je nečitelná.

       #53fc18 je značková zelená Kicku, tedy platformy, na které dvojice
       vysílá. Web ji dřív na některých místech míchal s tmavší #00e701;
       obojí teď vede přes tenhle token, takže se to nemá kde rozejít. */
    --go:        #53fc18;
    --go-hi:     #78ff4b;
    --go-deep:   #34c400;
    --go-ink:    #06140a;
    --go-rgb:    83, 252, 24;

    --live:      #ff2d55;
    --live-hi:   #ff7a92;
    --live-rgb:  255, 45, 85;

    --coin:      #ffc163;
    --coin-deep: #c78f30;
    --coin-rgb:  255, 193, 99;

    /* Doplňkový štítek. Nikdy ne akce — na to je zelená. */
    --sky:       #7ec8ff;
    --sky-rgb:   126, 200, 255;

    /* Varovná/chybová barva sdílí odstín se živým vysíláním, ale používá se
       jen ve formulářích — mimo ně by dvě červené věci znamenaly dvě věci. */
    --warn:      #ff8a3d;
    --error:     #ff5e78;

    /* ── Stín ───────────────────────────────────────────────────────────
       Vždycky černý, nikdy barevný. Světlá linka nahoře uvnitř dělá z karty
       desku, která leží na pultu, ne obdélník nalepený na pozadí. */
    --lift:      inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .45);
    --lift-hi:   inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px rgba(0, 0, 0, .55);
    --lift-sm:   0 4px 14px rgba(0, 0, 0, .35);

    /* ── Rádius ─────────────────────────────────────────────────────────
       Karta má víc než tlačítko: velká plocha zaoblení unese, malý ovládací
       prvek by se zakulatil do pilulky a přestal vypadat jako tlačítko. */
    --r-card:    20px;
    --r-btn:     8px;
    --r-chip:    6px;
    --r-pill:    999px;

    /* ── Písmo ──────────────────────────────────────────────────────────
       Tři role, ne dvě. Rozdělení je věcné, ne náladové:
         Archivo 800 hodně stažené  → nadpisy a částky
         Inter Tight                → všechen čtený text
         JetBrains Mono             → CO JE ÚDAJ: štítky, čísla v tabulce,
                                      oční linky, štítky u karet, kódy
       Ten strojopis je podpis celého webu. Stránka se pak čte jako výpis
       parametrů, ne jako reklamní leták — a přesně tak se nabídky
       porovnávají. Kde stojí číslo, tam patří monospace. */
    --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --font-text:    'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-num:     'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --font-code:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

    /* Prostrkání. Nadpis se stahuje, štítek roztahuje. Strojopisný štítek
       potřebuje míň než bezpatkový — písmena už mají vlastní rozestup. */
    --track-tight:  -.035em;
    --track-wide:   .12em;

    /* ── Rozměry ────────────────────────────────────────────────────────  */
    --rail-w:       1200px;   /* šířka obsahu */
    --rail-narrow:  760px;    /* čtený text */
    --gutter:       20px;
    --top-h:        64px;     /* výška hlavičky */
    --sec-y:        clamp(48px, 6vw, 76px);   /* svislý rytmus sekcí */

    /* ── Přechody ───────────────────────────────────────────────────────  */
    --t-fast:   .14s cubic-bezier(.2, .6, .3, 1);
    --t-base:   .22s cubic-bezier(.2, .6, .3, 1);
    --t-slow:   .38s cubic-bezier(.2, .6, .3, 1);

    /* ── Vrstvení ───────────────────────────────────────────────────────  */
    --z-sticky:   100;
    --z-navbar:   1000;
    --z-dropdown: 1100;
    --z-backdrop: 1200;
    --z-menu:     1300;
    --z-overlay:  2000;
    --z-toast:    3000;
    --z-cookie:   2600;


    /* ══ 2) MOSTY ═══════════════════════════════════════════════════════
       Stará jména ukazují na nový systém. Vrstvy, které se ještě
       nepřepisovaly, se tím přebarví samy a nikde nezůstane starý odstín. */

    /* Plochy KARTY */
    --kt-pg:      var(--bg);
    --kt-head:    var(--head);
    --kt-band:    var(--band);
    --kt-card:    var(--panel);
    --kt-card-hi: var(--panel-hi);
    --kt-sf:      var(--panel);
    --kt-sf-2:    var(--panel-hi);
    --kt-el:      var(--raise);

    --kt-line:    var(--rail);
    --kt-line-2:  var(--rail-2);

    --kt-ink:     var(--paper);
    --kt-ink-2:   var(--paper-2);
    --kt-ink-3:   var(--paper-3);

    --kt-green:     var(--go);
    --kt-green-h:   var(--go-hi);
    --kt-green-d:   var(--go-deep);
    --kt-green-rgb: var(--go-rgb);
    --kt-live:      var(--live);
    --kt-live-2:    var(--live-hi);
    --kt-live-rgb:  var(--live-rgb);
    --kt-coin:      var(--coin);
    --kt-coin-d:    var(--coin-deep);
    --kt-warn:      var(--warn);
    --kt-sky:       var(--sky);
    --kt-sky-rgb:   var(--sky-rgb);

    --kt-shadow:    var(--lift);
    --kt-shadow-hi: var(--lift-hi);

    --kt-r:      var(--r-card);
    --kt-r-sm:   var(--r-btn);
    --kt-r-pill: var(--r-pill);
    --kt-top-h:  var(--top-h);
    --kt-rail:   var(--rail-w);

    /* Písmo, stará jména */
    --font-display-legacy: var(--font-display);
    --font-heading: var(--font-display);
    --font-body:    var(--font-text);
    --font-accent:  var(--font-display);
    --font-secondary: var(--font-text);
    --font-mono:    var(--font-code);
    --jl-font:      var(--font-text);
    --jl-font-num:  var(--font-num);

    --font-size-xs:   .75rem;
    --font-size-sm:   .875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  2rem;
    --font-size-4xl:  2.5rem;
    --font-size-5xl:  3.25rem;
    --font-size-6xl:  4.25rem;
    --font-size-7xl:  5.5rem;

    --line-height-tight:  1.06;
    --line-height-normal: 1.65;
    --line-height-loose:  1.8;

    /* Značka a akcenty */
    --primary:   var(--go);
    --secondary: var(--go-hi);
    --accent:    var(--go);
    --success:   var(--go);
    --danger:    var(--error);
    --color-primary:       var(--go);
    --color-primary-rgb:   var(--go-rgb);
    --color-secondary:     var(--go-hi);
    --color-secondary-rgb: var(--go-rgb);
    --color-accent:        var(--go);
    --color-accent-rgb:    var(--go-rgb);
    --color-success:       var(--go);
    --color-danger:        var(--error);
    --kick-green:          var(--go);
    --kick-green-deep:     var(--go-deep);
    --jlcasino-primary:    var(--go);
    --jlcasino-secondary:  var(--go-deep);
    --jlcasino-gradient:   var(--go);
    --discord-blue: #5865f2;
    --youtube-red:  #ff0000;

    /* Zděděná cyberpunková paleta. Fialová, purpurová a azurová na webu
       nezůstávají — každá se sráží na neutrální nebo na jedinou akční
       zelenou, takže staré selektory renderují v novém vzhledu. */
    --purple:  var(--paper-2);
    --purple2: var(--paper-3);
    --cyan:    var(--go);
    --green:   var(--go);
    --gold:    var(--coin);
    --red:     var(--live);

    /* Pozadí, stará jména */
    --bg-void:        var(--head);
    --bg-abyss:       var(--head);
    --bg-darkest:     var(--head);
    --bg-darker:      var(--bg);
    --bg-dark:        var(--bg);
    --bg-surface:     var(--panel);
    --bg-elevated:    var(--raise);
    --bg-card:        var(--panel);
    --bg-card-alt:    var(--band);
    --bg-card-hover:  var(--panel-hi);
    --card-bg:        var(--panel);
    --surface:        var(--panel);
    --bg2: var(--panel);
    --bg3: var(--panel-hi);
    --bg4: var(--raise);

    /* Sklo. Nový vzhled rozostření nepoužívá — panel je plný a neprůhledný,
       aby text na něm držel kontrast i přes obrázek pod ním. */
    --bg-glass:        var(--panel);
    --bg-glass-light:  var(--panel);
    --bg-glass-strong: var(--panel-hi);
    --bg-overlay:      rgba(7, 9, 10, .82);
    --glass-card:       var(--panel);
    --glass-card-hover: var(--panel-hi);
    --glass-border:       var(--rail);
    --glass-border-hover: var(--rail-2);
    --glass-border-glow:  var(--rail-2);
    --glass-blur:        none;
    --glass-blur-strong: none;

    /* Text, stará jména */
    --text:           var(--paper);
    --text-primary:   var(--paper);
    --text-secondary: var(--paper-2);
    --text-tertiary:  var(--paper-3);
    --text-muted:     var(--paper-3);
    --text-dark:      var(--go-ink);
    --text-neon:      var(--go);
    --text2:  var(--paper-2);
    --ink2:   var(--paper-2);
    --muted:  var(--paper-3);
    --line-1: var(--rail);
    --line-2: var(--rail-2);
    --border2: var(--rail-2);

    /* Linky a rádiusy, stará jména */
    --border:        var(--rail);
    --border-subtle: var(--rail);
    --border-glow:   var(--rail-2);
    --border-radius:      var(--r-btn);
    --border-radius-xs:   6px;
    --border-radius-sm:   var(--r-chip);
    --border-radius-lg:   var(--r-card);
    --border-radius-xl:   18px;
    --border-radius-full: var(--r-pill);
    --radius-sm:   var(--r-chip);
    --radius-md:   var(--r-btn);
    --radius-lg:   var(--r-card);
    --radius-xl:   18px;
    --radius-btn:  var(--r-btn);
    --radius-card: var(--r-card);
    --radius-chip: var(--r-chip);
    --radius-tile: var(--r-card);
    --radius-pill: var(--r-pill);

    /* Záře. Neon z webu odchází — na tmavém pultu dělá text rozmazaný
       a v oboru ho nemá nikdo, kdo to myslí vážně. */
    --glow-primary:        none;
    --glow-primary-strong: none;
    --glow-secondary:      none;
    --glow-secondary-strong: none;
    --glow-cyan:           none;
    --glow-cyan-strong:    none;
    --glow-cyan-text:      none;
    --glow-magenta:        none;
    --glow-magenta-strong: none;
    --glow-purple:  none;
    --glow-pink:    none;
    --glow-orange:  none;
    --glow-red:     none;
    --glow-gold:    none;
    --glow-gold-strong: none;
    --glow-green:   none;
    --glow-success: none;
    --glow-jlcasino: none;

    /* Přechody v barvě. Plochý panel drží tvar líp než výplň, která se mění
       pod textem, takže „gradient" je teď jedna barva. */
    --gradient-primary:         var(--go);
    --gradient-primary-reverse: var(--go);
    --gradient-cyber:           var(--go);
    --gradient-cyber-reverse:   var(--go);
    --gradient-cyber-vertical:  var(--go);
    --gradient-neon-accent:     var(--go);
    --gradient-neon-pink:       var(--go);
    --gradient-neon-purple:     var(--go);
    --gradient-success:  var(--go);
    --gradient-danger:   var(--live);
    --gradient-red:      var(--live);
    --gradient-warning:  var(--warn);
    --gradient-gold:     var(--coin);
    --gradient-gold-vertical: var(--coin);
    --gradient-kick:     var(--go);
    --gradient-jlcasino: var(--go);
    --gradient-jlcasino-hover: var(--go-hi);
    --gradient-dark:        var(--panel);
    --gradient-dark-reverse: var(--panel);
    --gradient-dark-radial: var(--bg);
    --gradient-card:        var(--panel);
    --gradient-card-cyber:  var(--panel);
    --gradient-glass:        var(--panel);
    --gradient-glass-hover:  var(--panel-hi);
    --gradient-glass-border: var(--rail);

    /* Stíny, stará jména */
    --shadow-sm:  var(--lift-sm);
    --shadow-md:  var(--lift-sm);
    --shadow-lg:  var(--lift);
    --shadow-xl:  var(--lift-hi);
    --shadow-card:       var(--lift);
    --shadow-card-hover: var(--lift-hi);
    --shadow-neon:       var(--lift);

    /* Průhlednosti. Barevné (fialová, azurová) míří na bílou — po zrušení
       cyberpunku by jinak zůstaly barevné skvrny na jinak neutrálním pultu. */
    --alpha-white-2:  rgba(255, 255, 255, .02);
    --alpha-white-3:  rgba(255, 255, 255, .03);
    --alpha-white-4:  rgba(255, 255, 255, .04);
    --alpha-white-5:  rgba(255, 255, 255, .05);
    --alpha-white-6:  rgba(255, 255, 255, .06);
    --alpha-white-8:  rgba(255, 255, 255, .08);
    --alpha-white-10: rgba(255, 255, 255, .10);
    --alpha-white-15: rgba(255, 255, 255, .15);
    --alpha-white-20: rgba(255, 255, 255, .20);
    --alpha-white-25: rgba(255, 255, 255, .25);
    --alpha-white-30: rgba(255, 255, 255, .30);
    --alpha-white-35: rgba(255, 255, 255, .35);
    --alpha-white-40: rgba(255, 255, 255, .40);
    --alpha-white-45: rgba(255, 255, 255, .45);
    --alpha-white-50: rgba(255, 255, 255, .50);
    --alpha-white-55: rgba(255, 255, 255, .55);
    --alpha-white-60: rgba(255, 255, 255, .60);
    --alpha-white-70: rgba(255, 255, 255, .70);
    --alpha-white-85: rgba(255, 255, 255, .85);
    --alpha-white-90: rgba(255, 255, 255, .90);

    --alpha-black-20: rgba(0, 0, 0, .20);
    --alpha-black-30: rgba(0, 0, 0, .30);
    --alpha-black-40: rgba(0, 0, 0, .40);
    --alpha-black-50: rgba(0, 0, 0, .50);
    --alpha-black-60: rgba(0, 0, 0, .60);
    --alpha-black-70: rgba(0, 0, 0, .70);
    --alpha-black-80: rgba(0, 0, 0, .80);
    --alpha-black-90: rgba(0, 0, 0, .90);

    --alpha-cyan-5:  rgba(var(--go-rgb), .05);
    --alpha-cyan-8:  rgba(var(--go-rgb), .08);
    --alpha-cyan-10: rgba(var(--go-rgb), .10);
    --alpha-cyan-15: rgba(var(--go-rgb), .14);
    --alpha-cyan-20: rgba(var(--go-rgb), .18);
    --alpha-cyan-25: rgba(var(--go-rgb), .22);
    --alpha-cyan-30: rgba(var(--go-rgb), .26);
    --alpha-cyan-40: rgba(var(--go-rgb), .32);
    --alpha-cyan-50: rgba(var(--go-rgb), .38);

    --alpha-purple-4:  rgba(255, 255, 255, .04);
    --alpha-purple-6:  rgba(255, 255, 255, .06);
    --alpha-purple-8:  rgba(255, 255, 255, .08);
    --alpha-purple-10: rgba(255, 255, 255, .10);
    --alpha-purple-12: rgba(255, 255, 255, .12);
    --alpha-purple-15: rgba(255, 255, 255, .14);
    --alpha-purple-20: rgba(255, 255, 255, .16);
    --alpha-purple-25: rgba(255, 255, 255, .18);
    --alpha-purple-30: rgba(255, 255, 255, .20);
    --alpha-purple-35: rgba(255, 255, 255, .22);
    --alpha-purple-40: rgba(255, 255, 255, .24);
    --alpha-purple-50: rgba(255, 255, 255, .28);
    --alpha-purple-55: rgba(255, 255, 255, .30);
    --alpha-purple-60: rgba(255, 255, 255, .32);

    /* Rozměry, stará jména */
    --container-width:  var(--rail-w);
    --container-narrow: var(--rail-narrow);
    --container-wide:   1360px;
    --nav-height:          var(--top-h);
    --nav-height-scrolled: var(--top-h);
    --nav-height-mobile:   var(--top-h);
    --section-padding:        var(--sec-y);
    --section-padding-tablet: var(--sec-y);
    --section-padding-mobile: var(--sec-y);

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Přechody, stará jména */
    --transition-ultra:  var(--t-fast);
    --transition-fast:   var(--t-fast);
    --transition-normal: var(--t-base);
    --transition-slow:   var(--t-slow);
    --transition-slower: var(--t-slow);
    --transition-smooth: var(--t-slow);
    --transition-bounce: var(--t-base);
    --transition-spring: var(--t-base);

    /* Vrstvení, stará jména */
    --z-behind:    -1;
    --z-particles: -1;
    --z-normal:     1;
    --z-floating:  50;
    --z-fixed:     90;
    --z-nav-backdrop: var(--z-backdrop);
    --z-nav-dropdown: var(--z-dropdown);
    --z-nav-menu:     var(--z-menu);
    --z-age-gate:     2400;

    /* Sazba obsahových bloků (.ed-*) */
    --ed-body:    17px;
    --ed-body-lh: 1.7;
    --ed-h2:      clamp(26px, 3.2vw, 36px);
    --ed-h3:      20px;
    --ed-small:   13.5px;
    --ed-measure: 68ch;
    --ed-read:    68ch;
    --ed-frame:   var(--rail);
}

/* Pohyb je odpověď, ne ozdoba. Lidem s vestibulární poruchou z něj bývá
   špatně, takže se vypíná úplně — ne že se jen zkrátí. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0ms;
        --t-base: 0ms;
        --t-slow: 0ms;
        --transition-ultra:  0ms;
        --transition-fast:   0ms;
        --transition-normal: 0ms;
        --transition-slow:   0ms;
        --transition-slower: 0ms;
        --transition-smooth: 0ms;
        --transition-bounce: 0ms;
        --transition-spring: 0ms;
    }
}