/* SENTRIX — dizajnové tokeny
   Zdroj: ProSimSi dizajn manuál (ps-*) → premapované na --sx-*
   Light je default na :root, dark cez [data-sx-theme="dark"] na <html>. */

:root,
[data-sx-theme="light"] {
  /* text */
  --sx-ink:          #0F1729;
  --sx-ink-2:        #1B2540;
  --sx-ink-3:        #2A2F63;
  --sx-body:         #26303F;
  --sx-muted:        #5A6478;
  --sx-muted-2:      #8A93A5;
  --sx-label:        #A2AAB8;

  /* linky a plochy */
  --sx-line:         #E6E8EC;
  --sx-line-soft:    #F1F3F6;
  --sx-line-strong:  #CFD4DE;
  --sx-bg:           #F6F7F9;
  --sx-surface:      #F6F7F9;
  --sx-surface-2:    #F4F5F8;
  --sx-card:         #FFFFFF;
  --sx-row:          #FBFBFC;
  --sx-field:        #F8F9FB;

  /* značka */
  --sx-brand:        #4F46E5;
  --sx-brand-dark:   #4338CA;
  --sx-violet:       #7C6CF3;
  --sx-tag:          #EEF0FE;
  --sx-brand-bg:     #F8F8FE;

  /* sémantické stavy */
  --sx-ok:           #16A34A;
  --sx-ok-bg:        #E8F6EE;
  --sx-warn:         #D97706;
  --sx-warn-bg:      #FDF3E3;
  --sx-err:          #DC2626;
  --sx-err-bg:       #FDECEC;

  /* tmavé plochy */
  --sx-hero:         #06080F;
  --sx-night:        #070A12;

  /* geometria */
  --sx-radius-sm:    8px;   /* ikonové / xs tlačidlá, riadkové akcie */
  --sx-radius:       9px;   /* tlačidlá, polia, prepínače */
  --sx-radius-lg:    12px;  /* karty, tabuľky, panely */
  --sx-radius-xl:    14px;  /* väčšie plochy */

  --sx-shadow-card:  0 1px 2px rgba(15,23,41,.04), 0 1px 3px rgba(15,23,41,.06);
  --sx-shadow-pop:   0 18px 40px -12px rgba(15,23,41,.28);
  --sx-shadow-brand: 0 1px 2px rgba(79,70,229,.35);

  /* typografia */
  --sx-font:         Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sx-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* rozmery shellu */
  --sx-sidebar-w:    250px;
  --sx-topbar-h:     52px;
  --sx-control-h:    38px;   /* md tlačidlá a polia */
  --sx-control-h-sm: 34px;
  --sx-row-h:        34px;   /* kompaktný (SOC) riadok tabuľky */
}

[data-sx-theme="dark"] {
  --sx-ink:          #F1F4FA;
  --sx-ink-2:        #E2E7F0;
  --sx-ink-3:        #C9D0DE;
  --sx-body:         #CBD3E1;
  --sx-muted:        #94A0B4;
  --sx-muted-2:      #6E7A8F;
  --sx-label:        #5B677C;

  --sx-line:         #222B3D;
  --sx-line-soft:    #1A2231;
  --sx-line-strong:  #354258;
  --sx-bg:           #070A12;
  --sx-surface:      #0B101B;
  --sx-surface-2:    #0C111C;
  --sx-card:         #0F1523;
  --sx-row:          #121A2A;
  --sx-field:        #131B2B;

  --sx-brand:        #6D63F0;
  --sx-brand-dark:   #8279FF;
  --sx-violet:       #9A8DFF;
  --sx-tag:          #1C1F3C;
  --sx-brand-bg:     #12162B;

  --sx-ok:           #34C36C;
  --sx-ok-bg:        #0F2A1B;
  --sx-warn:         #E29B2E;
  --sx-warn-bg:      #2C2009;
  --sx-err:          #F26063;
  --sx-err-bg:       #2D1216;

  --sx-shadow-card:  0 1px 2px rgba(0,0,0,.4);
  --sx-shadow-pop:   0 18px 40px -12px rgba(0,0,0,.6);
  --sx-shadow-brand: 0 1px 2px rgba(0,0,0,.5);
}

/* Mapovanie zo starých ps-* názvov, ak niekde ostali v šablónach.
   Dá sa zmazať po dokončení migrácie. */
:root {
  --ps-ink: var(--sx-ink);          --ps-body: var(--sx-body);
  --ps-muted: var(--sx-muted);      --ps-muted-2: var(--sx-muted-2);
  --ps-label: var(--sx-label);      --ps-line: var(--sx-line);
  --ps-line-soft: var(--sx-line-soft); --ps-line-strong: var(--sx-line-strong);
  --ps-surface: var(--sx-surface);  --ps-field: var(--sx-field);
  --ps-brand: var(--sx-brand);      --ps-brand-dark: var(--sx-brand-dark);
  --ps-tag: var(--sx-tag);          --ps-ok: var(--sx-ok);
  --ps-warn: var(--sx-warn);        --ps-err: var(--sx-err);
}

/* ---------------------------------------------------------------------------
   Compatibility aliases — the previous SENTRIX design used a different --sx-*
   naming scheme (--sx-accent, --sx-text*, --sx-border*, ...). Every one of
   those names is still read from wwwroot/app/*.js and index.html, so each is
   aliased here to its closest equivalent in the new token set above rather
   than being redefined with its own hard-coded value. Because these are
   var() references (not literals) they still repaint correctly per theme —
   the substitution happens against whatever the referenced token resolves to
   on the current [data-sx-theme] scope, light or dark.

   --sx-bg, --sx-ok, --sx-warn, --sx-warn-bg, --sx-radius, --sx-radius-lg and
   --sx-radius-sm are NOT listed here: the new token file already defines
   them under those exact names, so the old usage keeps working unchanged.

   Safe to delete once every wwwroot/app/*.js file has been migrated to the
   new --sx-ink/--sx-brand/--sx-line/... names directly. */
:root {
  /* Accent (links/icons/text) and primary (filled button) both mapped to
     the single new brand color — the new palette does not distinguish them
     the way the previous manual did. */
  --sx-accent:        var(--sx-brand);
  --sx-accent-hover:  var(--sx-brand-dark);
  --sx-accent-soft:   var(--sx-brand-bg);
  --sx-primary:       var(--sx-brand);
  --sx-primary-hover: var(--sx-brand-dark);

  /* Surfaces */
  --sx-active:        var(--sx-brand-bg);   /* old --sx-active (#F8F8FE light) === new --sx-brand-bg */
  --sx-bg2:           var(--sx-card);
  --sx-bg3:           var(--sx-surface-2);
  --sx-panel:         var(--sx-card);
  --sx-panel2:        var(--sx-surface-2);
  --sx-hover:         var(--sx-row);        /* old --sx-hover (#FBFBFC light) === new --sx-row */

  /* Borders */
  --sx-border:        var(--sx-line);
  --sx-border2:       var(--sx-line-soft);
  --sx-border3:       var(--sx-line-strong);
  --sx-border4:       var(--sx-line-strong);

  /* Text */
  --sx-text:          var(--sx-ink);
  --sx-text2:         var(--sx-ink-2);
  --sx-text3:         var(--sx-ink-3);
  --sx-text4:         var(--sx-muted);
  --sx-text5:         var(--sx-muted);
  --sx-text6:         var(--sx-muted);
  --sx-text7:         var(--sx-label);

  /* Status */
  --sx-danger:        var(--sx-err);
  --sx-crit:          var(--sx-err);
  --sx-critical:      var(--sx-err);
  /* The new palette has no distinct "high" severity tone between warn and
     err — closest available is warn. Flagged for design follow-up. */
  --sx-high:          var(--sx-warn);
  --sx-info:          var(--sx-muted);      /* old --sx-info (#5A6478 light) === new --sx-muted */
  --sx-teal:          var(--sx-violet);     /* old --sx-teal (#7C6CF3) === new --sx-violet, exact */

  /* Misc */
  --sx-shadow:        var(--sx-shadow-card);
}