/* ══════════════════════════════════════════════════════════════════════════
   SD420IT — design tokeny (JEDINÝ zdroj pravdy pro barvy a povrchy)

   Používají je OBĚ frontendy:
     * Jinja UI  — <link> v templates/base.html (dřív byly tyhle proměnné
       vlepené přímo v <style> v base.html),
     * React SPA — frontend/src/index.css tenhle soubor importuje a
       tailwind.config.js na proměnné odkazuje (var(--…)), takže Tailwind
       utility a Bootstrap komponenty kreslí stejnými barvami.

   Kdo tohle mění, mění vzhled obou UI zároveň — což je přesně cíl: aby se
   nové UI nemohlo „rozejít" se starým.

   Režim se přepíná atributem data-bs-theme na <html> (Bootstrap 5.3 nativně;
   nastavuje ho inline skript v <head> podle localStorage 'sd-theme'). React
   SPA používá týž atribut i týž klíč, takže přepínač je konzistentní.
   ══════════════════════════════════════════════════════════════════════════ */

/* 420IT / NCS theme. Recolor to 420IT brand at M10 by swapping these vars. */
:root {
  /* — base brand palette (do not change; tenant may override --brand-accent) — */
  --ncs-primary: #000000;
  --ncs-navy:    #000000;
  /* --brand-accent = surová barva tenanta (vstřikuje se v base.html); --ncs-green je
     akcent PO úpravě pro aktuální režim (dark ho zesvětluje kvůli kontrastu). */
  --brand-accent:#24B04C;
  --ncs-green:   var(--brand-accent);
  --ncs-green-d: #1B9E40;
  --ncs-green-dk:#187D36;
  --ncs-green-xl:#F0FDF3;
  --ncs-green-l: #DDFBE5;
  --ncs-light:   #F5F5F5;
  --ncs-border:  #E5E5E5;
  --ncs-muted:   #A3A3A3;

  /* — surfaces & hairlines (light) — dark je předefinuje níže — */
  --surface-page:#F1F1F1;
  --surface-card:#FFFFFF;
  --surface-head:#FAFBFA;
  --border-soft: #EEF0EE;
  --border-row:  #F0F2F0;
  --ctl-border:  #D9DCD9;
  --btn2-border: #D1D5DB;
  /* text/ikonka na výplni akcentní barvy (tlačítka, aktivní pill…) */
  --on-accent:   #FFFFFF;

  /* — derived tint scale (static fallback; brand-aware via color-mix below) — */
  --ncs-50:  #F0FDF3;
  --ncs-100: #DDFBE5;
  --ncs-200: #BDF5CC;
  --ncs-300: #8AE5A6;
  --ncs-400: #4FCA74;
  --ncs-500: #24B04C;
  --ncs-600: #1B9E40;
  --ncs-700: #187D36;
  --ncs-800: #14672D;
  --ncs-900: #0F4A21;

  /* — semantic tints: light background + dark text of the same hue — */
  --tint-success-bg:#D1FAE5; --tint-success-fg:#065F46;
  --tint-warning-bg:#FEF3C7; --tint-warning-fg:#92400E; --tint-warning-bd:#FDE68A;
  --tint-danger-bg: #FEE2E2; --tint-danger-fg: #991B1B;
  --tint-info-bg:   #DBEAFE; --tint-info-fg:   #1E40AF;
  --tint-neutral-bg:#F3F4F6; --tint-neutral-fg:#4B5563;

  /* — shape, depth, focus — */
  --radius-card: 10px;              /* cards, panels */
  --radius-ctl:  6px;               /* inputs, buttons, badges */
  --shadow-sm: 0 1px 2px rgba(15,24,18,.05);
  --focus-ring: 0 0 0 .2rem rgba(36,176,76,.22);

  /* — text — */
  --text-strong:#111827;
  --text-body:  #1F2937;
  --text-soft:  #6B7280;
}
/* Brand-aware tints: the per-tenant accent (--ncs-green, injected in base.html)
   drives the whole scale in browsers with color-mix (all evergreen since 2023). */
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --ncs-50:  color-mix(in srgb, var(--ncs-green) 6%,  white);
    --ncs-100: color-mix(in srgb, var(--ncs-green) 14%, white);
    --ncs-200: color-mix(in srgb, var(--ncs-green) 28%, white);
    --ncs-300: color-mix(in srgb, var(--ncs-green) 46%, white);
    --ncs-400: color-mix(in srgb, var(--ncs-green) 72%, white);
    --ncs-500: var(--ncs-green);
    --ncs-600: color-mix(in srgb, var(--ncs-green) 88%, black);
    --ncs-700: color-mix(in srgb, var(--ncs-green) 72%, black);
    --ncs-800: color-mix(in srgb, var(--ncs-green) 58%, black);
    --ncs-900: color-mix(in srgb, var(--ncs-green) 44%, black);
    --ncs-green-xl: var(--ncs-50);
    --ncs-green-l:  var(--ncs-100);
    --focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--ncs-green) 25%, transparent);
  }
}
/* ================= DARK MODE =================
   Bootstrap 5.3 nativní data-bs-theme="dark" (nastavuje inline skript v <head>).
   Povrchy = tmavě neutrální zinc, žádná čistá čerň. Statické hodnoty jsou
   fallback; tinty od brand barvy přepočítá color-mix blok níže. */
[data-bs-theme="dark"] {
  /* surfaces & hairlines */
  --surface-page:#151517;
  --surface-card:#1E1E22;
  --surface-head:#242428;
  --ncs-border:  #34343B;
  --border-soft: #2B2B31;
  --border-row:  #27272D;
  --ctl-border:  #3E3E46;
  --btn2-border: #4B4B54;
  --ncs-light:   #26262C;
  --ncs-muted:   #6E6E78;
  --on-accent:   #0C1A10;

  /* text */
  --text-strong:#F4F4F5;
  --text-body:  #D6D6DA;
  --text-soft:  #9C9CA5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --focus-ring: 0 0 0 .2rem rgba(78,201,116,.28);

  /* akcent — statický fallback (zesvětlený #24B04C) */
  --ncs-green:   #3DBE62;
  --ncs-green-d: #5ECB7D;
  --ncs-green-dk:#6FD48C;

  /* tint scale — fallback: tmavé tinty, vysoká čísla = světlý text */
  --ncs-50:  #1A2A1F;
  --ncs-100: #1C3624;
  --ncs-200: #1E4A2C;
  --ncs-300: #216338;
  --ncs-400: #279147;
  --ncs-500: #3DBE62;
  --ncs-600: #5ECB7D;
  --ncs-700: #83D99C;
  --ncs-800: #A9E6BB;
  --ncs-900: #CFF2DA;
  --ncs-green-xl: var(--ncs-50);
  --ncs-green-l:  var(--ncs-100);

  /* semantic tints: tmavý podklad + světlý text (AA na --surface-card) */
  --tint-success-bg:#11382A; --tint-success-fg:#6EE7B7;
  --tint-warning-bg:#3A2E10; --tint-warning-fg:#FCD34D; --tint-warning-bd:#5A491D;
  --tint-danger-bg: #44191D; --tint-danger-fg: #FCA5A5;
  --tint-info-bg:   #16294B; --tint-info-fg:   #93C5FD;
  --tint-neutral-bg:#2B2B32; --tint-neutral-fg:#BFBFC8;

  /* most k Bootstrap komponentám (modal, dropdown, formuláře, alerty) */
  --bs-body-bg: var(--surface-page);
  --bs-body-color: var(--text-body);
  --bs-emphasis-color: var(--text-strong);
  --bs-secondary-color: var(--text-soft);
  --bs-tertiary-color: var(--ncs-muted);
  --bs-border-color: var(--ncs-border);
  --bs-secondary-bg: var(--surface-head);
  --bs-tertiary-bg: #2B2B32;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root[data-bs-theme="dark"] {
    /* akcent od tenant barvy, zesvětlený ~17 % bílé pro kontrast na tmavé */
    --ncs-green:   color-mix(in srgb, var(--brand-accent) 83%, white);
    --ncs-green-d: color-mix(in srgb, var(--brand-accent) 70%, white);
    --ncs-green-dk:color-mix(in srgb, var(--brand-accent) 60%, white);
    /* tinty se míchají s tmavým povrchem místo bílé; horní konec škály
       (600–900, texty na tintách) se zesvětluje bílou — škála se obrací */
    --ncs-50:  color-mix(in srgb, var(--ncs-green)  9%, var(--surface-card));
    --ncs-100: color-mix(in srgb, var(--ncs-green) 16%, var(--surface-card));
    --ncs-200: color-mix(in srgb, var(--ncs-green) 28%, var(--surface-card));
    --ncs-300: color-mix(in srgb, var(--ncs-green) 42%, var(--surface-card));
    --ncs-400: color-mix(in srgb, var(--ncs-green) 62%, var(--surface-card));
    --ncs-500: var(--ncs-green);
    --ncs-600: color-mix(in srgb, var(--ncs-green) 85%, white);
    --ncs-700: color-mix(in srgb, var(--ncs-green) 68%, white);
    --ncs-800: color-mix(in srgb, var(--ncs-green) 52%, white);
    --ncs-900: color-mix(in srgb, var(--ncs-green) 38%, white);
    --ncs-green-xl: var(--ncs-50);
    --ncs-green-l:  var(--ncs-100);
    --focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--ncs-green) 32%, transparent);
  }
}
