/* Viagem — společné tokeny vzhledu (VIA-96): barvy, písmo, zaoblení, stíny pro intranet i ostatní aplikace.
   Jediný zdroj pravdy: intranet (style.css) z nich skládá své proměnné, hlavička <viagem-header>
   (assets/header.js) je čte ve Shadow DOM a aplikace na ně můžou postupně převést svůj styl.
   Vložení do aplikace (header.js ho vloží sám, když chybí):
     <link rel="stylesheet" href="https://viagemops.cz/assets/viagem-tokens.css">
   Předpona --vg- = nekoliduje s vlastními proměnnými aplikací (--bg, --text…).
   Motivy: světlý (výchozí), Viagem tmavý a Baby pink přes data-theme="dark" | "pink" na <html>.
   Vlastní vzhled hlavičky jen v jedné aplikaci (Školení: Academic): aplikace přebije proměnné --vg-* na elementu
   viagem-header ve svém CSS — hlavička i prvky vložené do ní je zdědí, jinde se nic nezmění. */

:root {
    --vg-brand:         #1eb5e9;                   /* azurová z loga */
    --vg-brand-600:     #129fd3;
    --vg-brand-700:     #0b7fb3;
    --vg-brand-2:       #0b7fb3;                   /* druhá barva přechodu (tlačítka, název, logo) */
    --vg-brand-soft:    rgba(30, 181, 233, .12);
    --vg-brand-glow:    rgba(30, 181, 233, .45);   /* záře loga a tlačítek */
    --vg-on-brand:      #ffffff;                   /* text na akcentu (tlačítko uživatele, Přihlásit se) */
    --vg-navy:          #0a1640;

    --vg-bg:            #f3f7fc;
    --vg-surface:       rgba(255, 255, 255, .78);  /* poloprůhledné „sklo" */
    --vg-surface-solid: #ffffff;
    --vg-surface-2:     #eef4fa;
    --vg-border:        #dfe7f1;
    --vg-border-strong: #c9d5e4;
    --vg-text:          #0f1b2d;
    --vg-text-soft:     #3b4a63;
    --vg-muted:         #66748b;
    --vg-link:          #0b7fb3;
    --vg-danger:        #d9363e;
    --vg-danger-soft:   #fdecec;
    --vg-ok:            #1a8f4e;
    --vg-ok-soft:       #e5f6ec;
    --vg-warn:          #a15c00;
    --vg-info:          #0b7fb3;                   /* plánovaná odstávka */
    --vg-info-soft:     #e3f5fc;
    --vg-topbar-bg:     rgba(255, 255, 255, .72);

    --vg-font:          "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --vg-font-display:  "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --vg-radius:        16px;
    --vg-radius-sm:     10px;
    --vg-shadow-sm:     0 1px 2px rgba(15, 27, 45, .05), 0 2px 8px -2px rgba(15, 27, 45, .06);
    --vg-shadow:        0 4px 12px -2px rgba(15, 27, 45, .08), 0 12px 32px -12px rgba(15, 27, 45, .12);
    --vg-shadow-brand:  0 10px 28px -10px rgba(30, 181, 233, .55);
    --vg-ring:          0 0 0 3px rgba(30, 181, 233, .28);
}
:root[data-theme="dark"] {
    --vg-brand-soft:    rgba(30, 181, 233, .16);
    --vg-bg:            #060b19;
    --vg-surface:       rgba(16, 24, 44, .72);
    --vg-surface-solid: #0f1830;
    --vg-surface-2:     #152039;
    --vg-border:        rgba(148, 176, 216, .14);
    --vg-border-strong: rgba(148, 176, 216, .26);
    --vg-text:          #e8eef8;
    --vg-text-soft:     #b8c4d8;
    --vg-muted:         #8b99b3;
    --vg-link:          #6fd0f5;
    --vg-danger:        #f2787e;
    --vg-danger-soft:   rgba(242, 120, 126, .14);
    --vg-ok:            #5fd394;
    --vg-ok-soft:       rgba(95, 211, 148, .14);
    --vg-warn:          #e8b06a;
    --vg-info:          #6fd0f5;
    --vg-info-soft:     rgba(30, 181, 233, .14);
    --vg-topbar-bg:     rgba(6, 11, 25, .66);

    --vg-shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
    --vg-shadow:        0 6px 18px -4px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .6);
    --vg-shadow-brand:  0 10px 30px -10px rgba(30, 181, 233, .45);
    color-scheme: dark;
}
/* Baby pink 🌸: převzatý z viagemHR (malinový akcent #d6336c / #a61e4d, švestková #7a2648, pudrové plochy) */
:root[data-theme="pink"] {
    --vg-brand:         #d6336c;
    --vg-brand-600:     #c22a60;
    --vg-brand-700:     #a61e4d;
    --vg-brand-2:       #a64d75;
    --vg-brand-soft:    rgba(214, 51, 108, .10);
    --vg-brand-glow:    rgba(214, 51, 108, .35);
    --vg-navy:          #7a2648;

    --vg-bg:            #fdf0f5;
    --vg-surface:       rgba(255, 255, 255, .8);
    --vg-surface-solid: #ffffff;
    --vg-surface-2:     #fbe9f1;
    --vg-border:        #f3cfdf;
    --vg-border-strong: #e8b6cc;
    --vg-text:          #4a1229;
    --vg-text-soft:     #6e2a48;
    --vg-muted:         #a35c7d;
    --vg-link:          #a61e4d;
    --vg-danger:        #9c1146;
    --vg-danger-soft:   rgba(156, 17, 70, .10);
    --vg-ok:            #2f8560;
    --vg-ok-soft:       #e5f4ec;
    --vg-warn:          #b86e14;
    --vg-info-soft:     #fbe9f1;
    --vg-topbar-bg:     linear-gradient(160deg, rgba(248, 200, 220, .9) 0%, rgba(244, 166, 198, .88) 55%, rgba(239, 143, 184, .88) 100%);

    --vg-shadow-sm:     0 1px 2px rgba(122, 38, 72, .06), 0 2px 8px -2px rgba(122, 38, 72, .08);
    --vg-shadow:        0 4px 12px -2px rgba(122, 38, 72, .08), 0 12px 40px -12px rgba(122, 38, 72, .16);
    --vg-shadow-brand:  0 10px 28px -10px rgba(214, 51, 108, .5);
    --vg-ring:          0 0 0 3px rgba(214, 51, 108, .28);
}

/* <viagem-header> (assets/header.js), než se načte skript, nebo bez JS: menu aplikace v řádku a stejná výška
   jako hotová lišta — stránka po načtení neposkočí */
viagem-header:not(:defined) {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; min-height: calc(57px + env(safe-area-inset-top, 0px));
    padding: calc(.6rem + env(safe-area-inset-top, 0px)) max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right, 0px))
             .6rem max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left, 0px));
    background: var(--vg-surface-solid); border-bottom: 1px solid var(--vg-border);
    font: 15px/1.55 var(--vg-font);
}
@media (max-width: 760px) {
    viagem-header:not(:defined) { min-height: calc(max(1.5rem, env(safe-area-inset-top, 0px)) + 50px); padding-top: max(1.5rem, env(safe-area-inset-top, 0px)); }
}

/* <viagem-header> má všude písmo intranetu — i menu a prvky, které do ní vloží aplikace (zvonek a jeho rozbalovací
   seznam…): přebije písmo aplikace (body, a, * i s !important; Controlling má Inter a Cormorant Garamond).
   Jen rodina písma — velikosti a barvy vlastních prvků aplikace zůstávají. */
viagem-header, viagem-header * { font-family: var(--vg-font) !important; }