/* ============================================================
   NEOX Design System v2 — TOKENY (kanoniczne) + font self-host
   Zrodlo prawdy: docs/superpowers/design-handoff/v2/TOKENS-v2.css
   + @font-face Hanken Grotesk (woff2, wwwroot/fonts/) — ADR-6 PRD DS.
   Ladowany PIERWSZY (przed bootstrap/Radzen/theme.css).
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-1.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   NEOX Design System — TOKENY v2
   Wklej jako: wwwroot/css/neox-tokens.css  (ładuj PIERWSZE, przed komponentami)
   ZASTĘPUJE neox-tokens.css v1 (jest jego nadzbiorem).

   ZASADA v2 — minimalny churn:
   • NAZWY zmiennych = WASZE (--bg-primary, --text-primary, --accent-blue, --radius-md…).
     25 ekranów NIE wymaga rename'u.
   • WARTOŚCI = nowy look (paleta/promienie/cienie odświeżenia DS).
   • DEFAULT = DARK + COMPACT (zgodnie z produkcją).
   • Na końcu: BRIDGE aliasujący nazwy v1 (--bg/--surface/--text/--r-md/--accent…) →
     na kanoniczne, żeby makiety referencyjne i mieszany kod działały w okresie przejściowym.

   Komponenty odwołują się WYŁĄCZNIE do var(--*). Nigdy surowych hexów.
   ============================================================ */

/* ---------- KRÓJ — SELF-HOST (RODO / intranet) ----------
   Pobierz Hanken Grotesk (latin + latin-ext — POLSKIE ZNAKI!), wagi 400–800,
   do wwwroot/fonts/ i odkomentuj @font-face zamiast linku Google.
   Wymagane wagi używane w DS: 400, 450, 500, 550, 600, 650, 700, 800.

   @font-face { font-family:"Hanken Grotesk"; font-weight:400; font-display:swap;
     src:url(/fonts/HankenGrotesk-Regular.woff2) format("woff2"); unicode-range:U+0000-024F,U+1E00-1EFF; }
   …(po jednym na wagę; latin-ext pokrywa ą ć ę ł ń ó ś ż ź)…
*/

/* ============================================================
   :root  ===  MOTYW CIEMNY (DOMYŚLNY)
   ============================================================ */
:root {
  /* ---- Akcent marki (jedyny konfigurowalny kolor) ---- */
  --accent-blue:        #2f6bf0;
  --accent-blue-hover:  color-mix(in srgb, var(--accent-blue) 82%, #fff);  /* w dark hover rozjaśnia */
  --accent-blue-soft:   color-mix(in srgb, var(--accent-blue) 22%, var(--bg-card));
  --accent-blue-softer: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-card));
  --accent-blue-ring:   color-mix(in srgb, var(--accent-blue) 38%, transparent);
  --accent-blue-text:   color-mix(in srgb, var(--accent-blue) 70%, #fff);   /* tekst/ikony AA na ciemnym */

  /* ---- Akcenty semantyczne + dodatkowe (wykresy/kalendarz) ---- */
  --accent-green:   #3ad07f;   --accent-green-soft:  color-mix(in srgb, var(--accent-green) 16%, var(--bg-card));
  --accent-red:     #f1697a;   --accent-red-soft:    color-mix(in srgb, var(--accent-red) 16%, var(--bg-card));
  --accent-orange:  #e0922f;   --accent-orange-soft: color-mix(in srgb, var(--accent-orange) 16%, var(--bg-card));
  --accent-purple:  #a78bfa;
  --accent-cyan:    #34c7d4;

  /* ---- Tła i powierzchnie ----
     Tier:  primary(app) ‹ secondary(panele/nav) ‹ card(tabele/modale) ‹ hover/tile/subtle */
  --bg-primary:     #0c0f15;   /* tło aplikacji */
  --bg-secondary:   #11151c;   /* sidebar, topbar, paski systemowe */
  --bg-card:        #151a22;   /* karty, tabele, modale */
  --bg-card-hover:  #1b212b;   /* hover wiersza/karty, nagłówki tabel */
  --bg-hover:       #1b212b;   /* generyczny hover kontrolek */
  --bg-tile:        #1b212b;   /* kafelki */
  --bg-subtle:      #181e27;   /* delikatne wypełnienia (child-summary, seg track) */

  /* ---- Obramowania ---- */
  --border-color:   #262d39;   /* standardowy obrys */
  --border-light:   #222936;   /* delikatne podziały w treści (divider) */
  --border-subtle:  #1d2330;   /* najsłabsze linie */
  --border-strong:  #333c4b;   /* NOWY: hover, uchwyty, linia sum */

  /* ---- Tekst (3 tiery; UWAGA na kolizję — patrz nota) ----
     primary = najmocniejszy · secondary = drugorzędny · muted = najsłabszy */
  --text-primary:   #e9ecf2;
  --text-secondary: #97a1b2;
  --text-muted:     #6b7585;   /* ⚠ to jest NAJSŁABSZY tier (odpowiednik „faint" z DS v1) */

  /* ---- Kalendarz / timeline (przeprojektowane, nazwy zostają) ---- */
  --calendar-weekend:  color-mix(in srgb, var(--text-muted) 12%, transparent);
  --calendar-today:    var(--accent-blue);
  --calendar-vacation: color-mix(in srgb, var(--accent-green) 60%, var(--bg-card));
  --calendar-holiday:  color-mix(in srgb, var(--accent-red) 34%, var(--bg-card));

  /* ---- Serie wykresów (Chart.js) — kolejność 1→8 ---- */
  --chart-1: #4d82f3;  --chart-2: #3ad07f;  --chart-3: #e0922f;  --chart-4: #a78bfa;
  --chart-5: #34c7d4;  --chart-6: #f1697a;  --chart-7: #f06ab0;  --chart-8: #8a94a6;

  /* ---- Promienie (nowy look; było 8/12/16/24 → teraz 8/10/14/20) ---- */
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* ---- Cienie ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-xl:  0 32px 80px rgba(0,0,0,.66), 0 4px 12px rgba(0,0,0,.5);
  --shadow-pop: 0 8px 28px rgba(0,0,0,.5);  /* dropdowny, hover-card, toast */

  /* ---- Odstępy ---- */
  --spacing-xs: 4px;  --spacing-sm: 8px;  --spacing-md: 14px;  --spacing-lg: 22px;  --spacing-xl: 32px;

  /* ---- Przejścia ---- */
  --transition-fast: .12s; --transition-normal: .18s; --transition-slow: .3s;

  /* ============================================================
     WYMIARY UKŁADU + GĘSTOŚĆ
     :root = COMPACT (default produkcji). Wariant luźny: [data-density="comfortable"].
     ============================================================ */
  --row-h:    46px;    /* wysokość wiersza tabeli */
  --cell-py:  8px;
  --nav-h:    33px;    /* wysokość pozycji nawigacji */
  --topbar-h: 52px;
  --sidebar-w:           274px;
  --sidebar-w-collapsed: 56px;   /* NOWY: rail */
  --impbar-h: 34px;    /* NOWY: pasek impersonacji nad topbarem */

  /* ---- INPUTY — single source (przejęte z Waszego pomysłu, 14 tokenów) ---- */
  --input-h:            34px;                       /* schodzi z gęstości */
  --input-h-lg:         42px;                       /* formularz/modal */
  --input-px:           12px;
  --input-radius:       var(--radius-md);
  --input-bg:           var(--bg-card);
  --input-bg-disabled:  var(--bg-subtle);
  --input-border:       var(--border-color);
  --input-border-hover: var(--border-strong);
  --input-border-focus: var(--accent-blue);
  --input-ring:         var(--accent-blue-ring);
  --input-text:         var(--text-primary);
  --input-placeholder:  var(--text-muted);
  --input-icon:         var(--text-muted);
  --input-invalid:      var(--accent-red);

  /* ---- GRIP / SPLITTER (NOWY) ---- */
  --grip-size:  4px;     /* grubość paska wskaźnika */
  --grip-hit:   12px;    /* obszar trafienia (NS: wysokość, EW: szerokość) */
  --grip-color: var(--border-strong);
  --grip-hover: var(--accent-blue);
}

/* ============================================================
   MOTYW JASNY  ===  aktywuj: <html data-theme="light">
   ============================================================ */
:root[data-theme="light"] {
  --accent-blue-hover:  color-mix(in srgb, var(--accent-blue) 84%, #000);
  --accent-blue-soft:   color-mix(in srgb, var(--accent-blue) 11%, var(--bg-card));
  --accent-blue-softer: color-mix(in srgb, var(--accent-blue) 6%, var(--bg-card));
  --accent-blue-ring:   color-mix(in srgb, var(--accent-blue) 32%, transparent);
  --accent-blue-text:   color-mix(in srgb, var(--accent-blue) 88%, #000);

  --accent-green:  #15924f;
  --accent-red:    #d23b48;
  --accent-orange: #b06a00;
  --accent-purple: #7c5cf0;
  --accent-cyan:   #0e9bab;

  --bg-primary:    #eef1f6;
  --bg-secondary:  #fbfcfe;
  --bg-card:       #ffffff;
  --bg-card-hover: #f7f8fb;
  --bg-hover:      #f7f8fb;
  --bg-tile:       #f7f8fb;
  --bg-subtle:     #f4f6fa;

  --border-color:  #e6e9f0;
  --border-light:  #eceef4;
  --border-subtle: #f0f2f7;
  --border-strong: #d4d9e4;

  --text-primary:   #161a22;
  --text-secondary: #5d6677;
  --text-muted:     #97a0b2;

  --shadow-sm:  0 1px 2px rgba(16,24,40,.05);
  --shadow-md:  0 4px 14px rgba(16,24,40,.08);
  --shadow-lg:  0 18px 48px rgba(16,24,40,.18), 0 2px 8px rgba(16,24,40,.06);
  --shadow-xl:  0 28px 70px rgba(16,24,40,.22), 0 4px 10px rgba(16,24,40,.08);
  --shadow-pop: 0 8px 28px rgba(16,24,40,.12);

  --chart-1: #2f6bf0;  --chart-2: #15924f;  --chart-3: #c47a16;  --chart-4: #7c5cf0;
  --chart-5: #0e9bab;  --chart-6: #d23b48;  --chart-7: #c43d8f;  --chart-8: #64748b;
}

/* ============================================================
   GĘSTOŚĆ LUŹNA (opcjonalna)  ===  <html data-density="comfortable">
   Default (brak atrybutu) = compact.
   ============================================================ */
:root[data-density="comfortable"] {
  --row-h:    60px;
  --cell-py:  13px;
  --nav-h:    38px;
  --topbar-h: 58px;
  --input-h:  38px;
}

/* ============================================================
   BAZA
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  background: var(--bg-primary);
}
button { font-family: inherit; }
::selection { background: var(--accent-blue-ring); }

/* ============================================================
   BRIDGE  ===  aliasy nazw DS v1 → kanoniczne (Wasze)
   Pozwala: (a) renderować makiety referencyjne (styles.css/styleguide.css
   używają nazw v1), (b) mieszać oba schematy w kodzie podczas migracji.
   Docelowo, gdy kod używa już tylko nazw kanonicznych, ten blok można usunąć.
   ============================================================ */
:root {
  /* tła / powierzchnie */
  --bg:          var(--bg-primary);
  --surface:     var(--bg-card);
  --surface-2:   var(--bg-card-hover);
  --sidebar-bg:  var(--bg-secondary);
  --topbar-bg:   var(--bg-secondary);
  /* obramowania */
  --border:        var(--border-color);
  --divider:       var(--border-light);
  /* --border-strong: ta sama nazwa po obu stronach (już kanoniczna) */
  /* tekst (mapowanie tierów!) */
  --text:        var(--text-primary);
  --text-muted:  var(--text-secondary);   /* ⚠ v1 „muted" = kanoniczny „secondary" */
  --text-faint:  var(--text-muted);        /* ⚠ v1 „faint"  = kanoniczny „muted" */
  /* akcent */
  --accent:        var(--accent-blue);
  --accent-press:  var(--accent-blue-hover);
  --accent-soft:   var(--accent-blue-soft);
  --accent-softer: var(--accent-blue-softer);
  --accent-ring:   var(--accent-blue-ring);
  --accent-text:   var(--accent-blue-text);
  /* semantyczne */
  --ok:        var(--accent-green);   --ok-bg: var(--accent-green-soft);  --ok-border: color-mix(in srgb, var(--accent-green) 30%, var(--bg-card));
  --warn:      var(--accent-orange);
  --danger:    var(--accent-red);     --danger-bg: var(--accent-red-soft);
  /* promienie */
  --r-sm: var(--radius-sm);  --r-md: var(--radius-md);  --r-lg: var(--radius-lg);  --r-xl: var(--radius-xl);  --pill: var(--radius-full);
}