/* pipeticket.com - verzia C „B v noci".
   Načíta sa za b.css a mení len farby: najprv premenné (zaklad.css, mockup.css aj b.css na nich
   stoja), potom nutné výnimky. Ukážky appky ostávajú svetlé - biele okná na tme ako produktové zábery
   („svetlé ostrovy" nižšie im vracajú svetlé premenné). Paleta z tmavých tokenov appky:
   noc #0E1420 (pozadie), noc-2 #151D2E (plochy), linka-tma #27314C, hmla #F4F6FA (text),
   tlmene-tma #98A5C0, signál #2F5BFF (tlačidlá), signál svetlý #7E9CFF (odkazy a akcent v texte).
   Kontrast (merané na noc / noc-2 / obálka): text 17,0 / 15,6 / 14,9, tlmené 7,4 / 6,8 / 6,5,
   signál svetlý 7,1 / 6,5 / 6,2, biela na tlačidle 5,2. Rozmery v rem, žiadny pohyb sa tu nepridáva. */

/* =====================================================================
   Premenné - tmavá téma
   ===================================================================== */
:root.tema-noc {
    color-scheme: dark;

    --noc-2: #151D2E;
    --noc-3: #1C2539;                       /* hover plôch, rám okna */
    --tlacidlo-plocha: #2F5BFF;             /* signál - len plocha tlačidla s bielym textom */
    --tlacidlo-hover: #2449D8;

    --stranka: var(--noc);
    --sneh: var(--noc);
    --papier: var(--noc-2);
    --hmla: var(--noc-3);
    --linka: #27314C;
    --linka-silna: #3A4666;
    --text: #F4F6FA;
    --tlmene: #98A5C0;
    /* na tme je akcent v texte svetlý signál; hover ešte svetlejší */
    --signal: #7E9CFF;
    --signal-tmavy: #A9BCFF;
    --obalka: #16203A;                      /* obálka B v noci - plocha s nádychom signálu */
    --paticka-pozadie: var(--noc);
    /* tiene na tme - hlbšie, svetlo dávajú žiary */
    --ui-tien: 0 2rem 4rem -1.25rem rgb(0 0 0 / 0.6), 0 0.375rem 1rem -0.25rem rgb(0 0 0 / 0.35);
    --ui-tien-maly: 0 0.875rem 2rem -0.5rem rgb(0 0 0 / 0.55), 0 0.125rem 0.375rem rgb(0 0 0 / 0.3);
}

/* =====================================================================
   Svetlé ostrovy - ukážky appky ostávajú v svetlých tokenoch
   ===================================================================== */
.tema-noc :is(
    .hero-scena,
    .cm,
    .cesta-plocha,
    .funkcia-ukazka,
    .pipe-karta,
    .mobil-ukazka,
    .vyzva-k,
    .ui,
    [class^="ui-"],
    [class*=" ui-"]
) {
    --papier: #FFFFFF;
    --hmla: #F4F6FA;
    --linka: #E3E8F0;
    --linka-silna: #C5CDDB;
    --text: #141B2B;
    --tlmene: #5B6780;
    --signal: #2F5BFF;
    --signal-svetly: #7E9CFF;
    --signal-tmavy: #2449D8;
    --obalka: #EEF2FF;
}

/* text v ostrove dedí svetlú tému (napr. kartička riešiteľa nemá vlastnú farbu) */
.tema-noc :is(.hero-scena, .cm, .cesta-plocha, .mobil-ukazka, .vyzva-k) {
    color: var(--text);
}

/* okná na tme - vlásková svetlá hrana, aby biela plocha nemala „rozmazaný" okraj */
.tema-noc :is(.hero-ram, .cm, .cesta-plocha) {
    box-shadow: 0 0 0 var(--vlas) rgb(255 255 255 / 0.08), var(--ui-tien);
}

/* =====================================================================
   Základ
   ===================================================================== */
.tema-noc ::selection {
    background: rgb(126 156 255 / 0.38);
    color: #FFFFFF;
}

/* fokus: svetlý signál + tmavý lem, viditeľný na tme aj na svetlom ostrove */
.tema-noc :focus-visible {
    outline-color: #7E9CFF;
    box-shadow: 0 0 0 0.3125rem var(--noc);
}

/* tlačidlá - plocha ostáva signál, text biely (--papier je na tme tmavý) */
.tema-noc .tlacidlo--primarne {
    background: var(--tlacidlo-plocha);
    color: #FFFFFF;
}

.tema-noc .tlacidlo--primarne:hover,
.tema-noc .tlacidlo--primarne:active {
    background: var(--tlacidlo-hover);
    color: #FFFFFF;
}

.tema-noc .b-vybuch::before {
    background: var(--tlacidlo-hover);
}

.tema-noc.je-vybuch .b-vybuch:hover {
    background: var(--tlacidlo-plocha);
}

.tema-noc .tlacidlo--sekundarne:hover,
.tema-noc .tlacidlo--sekundarne:active {
    border-color: var(--signal);
    color: var(--text);
}


/* =====================================================================
   Hlavička - tmavá pilulka, tmavá lišta a menu
   ===================================================================== */
@media (width >= 64rem) {
    .tema-noc .hlavicka-pozadie {
        filter:
            drop-shadow(var(--vlas) 0 0 var(--linka))
            drop-shadow(calc(-1 * var(--vlas)) 0 0 var(--linka))
            drop-shadow(0 var(--vlas) 0 var(--linka))
            drop-shadow(0 calc(-1 * var(--vlas)) 0 var(--linka))
            drop-shadow(0 0.75rem 1.5rem rgb(0 0 0 / 0.45));
    }

    /* pilulka je o chlp priesvitná, kužeľ za ňou presvitá */
    .tema-noc .hlavicka-pozadie > span {
        background: rgb(21 29 46 / 0.92);
    }
}

@media (width < 64rem) {
    .tema-noc .hlavicka {
        background: var(--noc-2);
    }

    .tema-noc.je-js .hlavicka-menu {
        background: var(--noc);
    }

    .tema-noc .hlavicka-menu-odkazy a:active {
        color: var(--signal);
    }
}

/* =====================================================================
   Hero - výraznejší kužeľ a žiara (svetlo na tme)
   ===================================================================== */
/* namiesto kužeľa (Jozef: lúč nie) - jemná mriežka, ktorá sa stráca, a široká žiara
   „horizontu" za oknom appky */
.tema-noc .hero-kuzel {
    background:
        radial-gradient(ellipse 45% 35% at 50% 100%, rgb(47 91 255 / 0.28), transparent 70%),
        linear-gradient(rgb(255 255 255 / 0.05) var(--vlas), transparent var(--vlas)) 50% 0 / 4rem 4rem,
        linear-gradient(90deg, rgb(255 255 255 / 0.05) var(--vlas), transparent var(--vlas)) 50% 0 / 4rem 4rem;
    -webkit-mask-image: radial-gradient(ellipse 55% 90% at 50% 45%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 55% 90% at 50% 45%, #000 25%, transparent 80%);
}
.tema-noc .hero-karta--pipe::before {
    background: radial-gradient(closest-side, rgb(126 156 255 / 0.32), transparent);
}

.tema-noc .hero-stitok {
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.35);
}

/* =====================================================================
   Cesta mailu
   ===================================================================== */
/* svetlá obálka s ukážkou v statickom stave - na tme jemná žiara pod ňou */
.tema-noc .cesta-plocha {
    box-shadow: 0 0 0 var(--vlas) rgb(255 255 255 / 0.08), 0 1.5rem 3.5rem -1.5rem rgb(47 91 255 / 0.45);
}

.tema-noc.je-cesta-pin .cesta-panel {
    box-shadow: inset 0 0 0 var(--vlas) var(--linka);
    background:
        radial-gradient(ellipse 60% 70% at 78% 50%, rgb(47 91 255 / 0.2), transparent 70%),
        var(--obalka);
}

.tema-noc .cm {
    box-shadow: 0 0 0 var(--vlas) rgb(255 255 255 / 0.1), 0 2rem 5rem -1.5rem rgb(47 91 255 / 0.5), 0 0.5rem 1.25rem -0.5rem rgb(0 0 0 / 0.5);
}

/* =====================================================================
   Funkcie, Pipe, cenník
   ===================================================================== */
.tema-noc .funkcia-ikona {
    box-shadow: inset 0 0 0 var(--vlas) rgb(126 156 255 / 0.22);
}

.tema-noc .pipe-karta::before {
    background: radial-gradient(closest-side, rgb(126 156 255 / 0.3), transparent);
}

.tema-noc .cennik-karta.is-hlavna {
    border-color: rgb(126 156 255 / 0.55);
    box-shadow: 0 0 0 0.25rem rgb(126 156 255 / 0.1), 0 1.5rem 4rem -1.5rem rgb(47 91 255 / 0.55);
}

.tema-noc .cennik-stitok {
    box-shadow: inset 0 0 0 var(--vlas) rgb(126 156 255 / 0.3);
}

/* =====================================================================
   Záverečná výzva - obálka so svetlom zhora
   ===================================================================== */
.tema-noc .vyzva-karta {
    box-shadow: inset 0 0 0 var(--vlas) var(--linka);
    background:
        radial-gradient(ellipse 55% 60% at 50% 0%, rgb(126 156 255 / 0.26), transparent 75%),
        var(--obalka);
}