/* SENTRIX — dizajnové tokeny
 *
 * Zdroj: redizajn A „SOC“ (mockup 1. 10. 2026, vault sentrix/Grafika/podklady/2026-10-01-redizajn-mockup).
 * Grafit a tyrkys, IBM Plex Sans + Mono, malé zaoblenia, vysoká hustota.
 *
 * Svetlý aj tmavý režim v jednej sade premenných cez light-dark(). Režim určuje color-scheme:
 *   - bez atribútu rozhoduje systém (prefers-color-scheme),
 *   - data-sx="light" | "dark" na <html> ho vynúti (nastavuje /js/sx-mode.js podľa voľby).
 *
 * SIGNÁLNE FARBY SA NIKDY NEPOUŽÍVAJÚ DEKORATÍVNE. Tyrkys je jediný akcent (interakcia,
 * aktívna položka, primárne tlačidlo). Červená / zelená / okrová = posúdenie.
 *
 * Kontrast (svetlý režim, voči #FFFFFF): akcent #0F766E 5,47:1, ok 5,04:1 na svojom podfarbení,
 * muted #56657A 5,19:1 na ploche #EDF0F4. Tyrkys #0F9488 je len pre grafy (3:1 stačí).
 */

:root {
  color-scheme: light dark;
}
:root[data-sx="light"] { color-scheme: light; }
:root[data-sx="dark"]  { color-scheme: dark; }

:root {
  /* ---------- plochy ---------- */
  --sx-bg:       light-dark(#EDF0F4, #0B0F14);   /* plátno */
  --sx-panel:    light-dark(#FFFFFF, #121921);   /* karta, panel */
  --sx-panel-2:  light-dark(#E7EBF0, #18212B);   /* druhá úroveň, tlačidlá, hlavičky */
  --sx-white:    light-dark(#FFFFFF, #0E141A);   /* polia a vnorené plochy v paneli */
  --sx-rail:     light-dark(#FFFFFF, #0E1319);   /* ľavý rail */
  --sx-rail-hi:  light-dark(#EDF0F4, #161E27);   /* hover v raile */
  --sx-rail-ink: light-dark(#56657A, #8E9DB1);   /* text v raile */
  --sx-rail-ink-hi: light-dark(#101820, #DCE4EE);
  --sx-line:     light-dark(#DDE3EA, #1C252F);
  --sx-line-2:   light-dark(#C7CFDA, #2A3644);

  /* ---------- text ---------- */
  --sx-ink:   light-dark(#101820, #DCE4EE);
  --sx-ink-2: light-dark(#3E4B5C, #A9B6C6);
  --sx-ink-3: light-dark(#56657A, #8392A6);

  /* ---------- akcent ---------- */
  --sx-accent:      light-dark(#0F766E, #2DD4BF);
  --sx-accent-hi:   light-dark(#0B5F58, #5EEAD4);
  --sx-accent-ink:  light-dark(#FFFFFF, #03201B);   /* text na akcente */
  --sx-accent-soft: light-dark(rgba(15, 118, 110, .10), rgba(45, 212, 191, .12));

  /* Pevná tmavá/kontrastná výplň: tooltip, toast, bublina. */
  --sx-solid:    light-dark(#101820, #26323F);
  --sx-on-solid: light-dark(#FFFFFF, #E6EDF5);

  /* Staré názvy z handoffu (lime) ukazujú na nový akcent — obrazovky sa nemusia prepisovať. */
  --sx-lime: var(--sx-accent);
  --sx-lime-ink: var(--sx-accent-ink);
  --sx-glow: var(--sx-accent-soft);

  /* ---------- signály (text a štítky) ---------- */
  --sx-grn: light-dark(#2A7430, #5CCB8A);   /* ok */
  --sx-red: light-dark(#C62828, #F4616B);   /* kritické */
  --sx-amb: light-dark(#9A5B00, #F2B13B);   /* varovanie */
  --sx-cyn: light-dark(#2457C5, #7FA8FF);   /* info */
  --sx-vio: light-dark(#6D4AC2, #A99BFF);
  --sx-violet: var(--sx-vio);

  --sx-grn-soft: light-dark(#E6F3E8, rgba(92, 203, 138, .13));
  --sx-red-soft: light-dark(#FBE4E4, rgba(244, 97, 107, .14));
  --sx-amb-soft: light-dark(#FCEFD3, rgba(242, 177, 59, .13));
  --sx-cyn-soft: light-dark(#E6EDFB, rgba(127, 168, 255, .13));
  --sx-vio-soft: light-dark(#EEE8F8, rgba(169, 155, 255, .13));

  /* ---------- grafické objekty (bodky, pruhy, čiary) ---------- */
  --sx-dot-crit: light-dark(#D93636, #F4616B);
  --sx-dot-warn: light-dark(#C98A12, #F2B13B);
  --sx-dot-ok:   light-dark(#2F8A3A, #5CCB8A);

  --sx-chart-1:    light-dark(#0F9488, #2DD4BF);   /* hlavná séria */
  --sx-chart-2:    light-dark(#6270D6, #8B9BFF);   /* druhá séria */
  --sx-chart-3:    light-dark(#8C98A8, #5C6B7A);   /* tretia / porovnanie */
  --sx-chart-area: light-dark(rgba(15, 148, 136, .12), rgba(45, 212, 191, .14));
  --sx-chart-ok:   light-dark(#AEB9C6, #33414F);   /* „bez nálezu“ v stuhách a mriežkach */
  --sx-chart-grid: light-dark(#E3E8EE, #1C252F);
  --sx-axis:       light-dark(#C7CFDA, #2A3644);
  --sx-axis-ink:   light-dark(#6B7A8E, #6E7D90);

  --sx-dot: light-dark(rgba(16, 24, 32, .07), rgba(220, 228, 238, .06));
  --sx-overlay: light-dark(rgba(16, 24, 32, .32), rgba(0, 0, 0, .55));
  --sx-shadow: 0 1px 2px light-dark(rgba(16, 24, 32, .06), rgba(0, 0, 0, 0));
  --sx-shadow-pop: 0 12px 34px light-dark(rgba(16, 24, 32, .16), rgba(0, 0, 0, .5));
  --sx-shadow-rail: 12px 0 40px light-dark(rgba(16, 24, 32, .14), rgba(0, 0, 0, .45));

  /* ---------- typografia ----------
   * IBM Plex Sans nesie rozhranie a prózu.
   * IBM Plex Mono nesie stroj: hostnames, časy, identifikátory, čísla KPI, osi. */
  --sx-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx-font-prose: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Minimum 9,5 px (osi grafov). Bežný text od 11 px. */
  --sx-fs-min: 9.5px;
  --sx-fs-overline: 10.5px;
  --sx-fs-label: 12.5px;
  --sx-fs-data: 12px;
  --sx-fs-body: 13px;
  --sx-fs-panel: 13px;
  --sx-fs-page: 20px;
  --sx-fs-metric: 28px;
  --sx-fs-display: 30px;

  --sx-lh-data: 1.45;
  --sx-lh-body: 1.6;
  --sx-lh-page: 1.15;
  --sx-ls-overline: .07em;

  /* ---------- rozmery ---------- */
  --sx-space: 4px;
  --sx-grid: 8px;
  --sx-nav-w: 56px;
  --sx-nav-w-open: 244px;
  --sx-topbar-h: auto;
  --sx-pad: 14px;
  --sx-gap: 12px;
  --sx-dot-gap: 20px;

  --sx-r-sm: 3px;
  --sx-r: 4px;
  --sx-r-lg: 6px;
  --sx-r-card: 4px;
  --sx-r-pill: 99px;

  --sx-t-hover: 160ms ease;
  --sx-t-panel: 220ms ease;
  --sx-t-modal: 220ms ease;
  --sx-t-overlay: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sx-t-hover: 0ms;
    --sx-t-panel: 0ms;
    --sx-t-modal: 0ms;
    --sx-t-overlay: 0ms;
  }
}