/*
 * BenOS UI — tmavý vzhled (jen tokeny)
 * ════════════════════════════════════════════════════════════════════════
 * Zapíná ho <html data-theme="dark"> (static/js/ui/tema.js: volba uživatele,
 * výchozí podle systému). Načítá se PO tématu nájemníka, takže stejná
 * specifičnost vyhraje. Komponenty ani moduly se nemění — přepisují se jen
 * hodnoty tokenů:
 *
 *   neutrály       tmavé plochy, světlý text
 *   stavové barvy  -50 = tmavý nádech (podklad štítků), -600/-700 = světlejší
 *                  tón, protože se z 90 % používají jako barva TEXTU
 *   primární škála téma nájemníka zůstává zdrojem: kotvy -300/-400/-500 se
 *                  nepřepisují, ostatní stupně se z nich odvodí (bez cyklu),
 *                  tlačítko bere -500 (bílý text drží kontrast), odkaz -300
 *
 * Tisk je vždy světlý (@media screen). Výstupy pro hosty, e-maily a TV
 * tokeny nenačítají, tmavý režim se jich netýká.
 */
@media screen {
  /* `html:root` = o stupeň vyšší specifičnost než soubor tématu, který UI kit
     načítá až po tomhle (náhledy témat). */
  html:root[data-theme="dark"],
  html[data-theme="dark"] [data-tenant-theme] {   /* i náhled tématu v kontejneru (UI kit) */
    color-scheme: dark;

    /* ─── Neutrály ─────────────────────────────────────────────────── */
    --color-bg:             #111722;
    --color-bg-subtle:      #0c111a;
    --color-surface:        #151c28;
    --color-surface-raised: #1b2331;
    --color-overlay:        rgba(0, 0, 0, 0.65);

    --color-border:        #263142;
    --color-border-hover:  #344155;
    --color-border-strong: #5b6b82;

    --color-text:           #e8eef6;
    --color-text-secondary: #c9d4e2;
    --color-text-body:      #aab7c7;
    --color-text-muted:     #8796a9;
    --color-text-disabled:  #76849a;
    --color-text-inverse:   #0c111a;

    /* ─── Stavové barvy ────────────────────────────────────────────── */
    --color-success-50:  color-mix(in srgb, var(--color-success-500) 16%, var(--color-surface));
    --color-success-600: #4ade80;
    --color-success-700: #86efac;
    --color-warning-50:  color-mix(in srgb, var(--color-warning-500) 16%, var(--color-surface));
    --color-warning-600: #fbbf24;
    --color-warning-700: #fcd34d;
    --color-error-50:    color-mix(in srgb, var(--color-error-500) 16%, var(--color-surface));
    --color-error-600:   #f87171;
    --color-error-700:   #fca5a5;
    --color-info-50:     color-mix(in srgb, var(--color-info-500) 16%, var(--color-surface));
    --color-info-600:    #22d3ee;
    --color-info-700:    #67e8f9;

    /* ─── Primární škála z kotev tématu ────────────────────────────── */
    --color-primary-50:   color-mix(in srgb, var(--color-primary-500) 18%, var(--color-surface));
    --color-primary-100:  color-mix(in srgb, var(--color-primary-500) 28%, var(--color-surface));
    --color-primary-200:  color-mix(in srgb, var(--color-primary-500) 42%, var(--color-surface));
    --color-primary-600:  var(--color-primary-400);
    --color-primary-700:  var(--color-primary-300);
    --color-primary-800:  color-mix(in srgb, var(--color-primary-300) 60%, white);
    --color-primary-900:  color-mix(in srgb, var(--color-primary-300) 40%, white);
    --color-primary-tint: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
    --color-primary-ring: color-mix(in srgb, var(--color-primary-400) 40%, transparent);

    /* Sémantika: tlačítko na tmavém potřebuje sytější plochu, odkaz světlejší. */
    --color-primary:       var(--color-primary-500);
    --color-primary-hover: var(--color-primary-400);
    --color-link:          var(--color-primary-300);
    --color-focus:         var(--color-primary-300);

    /* ─── Datová paleta: řady musí svítit na tmavém ────────────────── */
    --color-data-1: #8b7bff;

    /* Barvy směn z Teams: tmavé odstíny se na tmavé ploše ztratí (štítek
       sazby v plánovači) — stejný odstín, světlejší tón. */
    --color-smena-darkblue:   #7aa2f7;
    --color-smena-darkpurple: #a78bfa;
    --color-smena-darkpink:   #f472b6;
    --color-smena-darkyellow: #f59e0b;
    --color-smena-white:      #94a3b8;

    /* ─── Stíny: na tmavém nese hloubku rámeček, ne světlý stín ─────── */
    --shadow-border:   0 0 0 1px rgba(0, 0, 0, 0.4);
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-card:     0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-elevated: 0 15px 35px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 0 0 1px var(--color-primary-ring), 0 4px 12px rgba(0, 0, 0, 0.45);
  }
}