/* NOX: tokeny designu, kierunek K2 „Głęboki morski na ciepłej bieli”.
   Jedno źródło wartości dla panelu, strony, maili i grafik social NOX.
   Zasady użycia, pomiary kontrastu i komponenty: DESIGN-SYSTEM.md (ten katalog).
   Wartości 1:1 z zaakceptowaną makietą (8.10.2026, wariant B v2):
   projekty/nox-saas/docs/makiety/2026-10-08_PANEL-K2/nox.css. Zgodność pilnuje test parytetu (DESIGN-SYSTEM.md §23).
   Motyw: data-theme="light" | "dark" na <html>; brak atrybutu = jasny. Wybór Auto rozstrzyga skrypt w <head>. */

:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Powierzchnie */
  --bg: #F7F6F3;                 /* tło strony: ciepła biel */
  --surface: #FFFFFF;            /* karta, kafel, modal */
  --surface-2: #FAF9F6;          /* powierzchnia wtórna: wiersz podrzędny, panel pomocy, pasek edycji */
  --sidebar: #F1EFEA;            /* sidebar i szuflada */
  --fill: rgba(107, 102, 95, .10);    /* segment, hover pozycji menu, tło paska wykresu */
  --fill-2: rgba(107, 102, 95, .16);  /* aktywna pozycja menu */
  --row-hover: rgba(107, 102, 95, .05); /* wiersz tabeli pod kursorem */
  --overlay: rgba(28, 27, 25, .32);   /* tło modala i szuflady */

  /* Tekst i linie */
  --text: #1C1B19;
  --text-2: #6B665F;             /* tekst wtórny, etykiety, metadane (jedyny słabszy tekst) */
  --control: #87827A;            /* obrys kontrolek, oś zera, istotne granice (3:1) */
  --hairline: rgba(28, 27, 25, .10);  /* separatory dekoracyjne, obrys kart */
  --grid: rgba(28, 27, 25, .08);      /* siatka wykresów */

  /* Akcent (akcje, aktywna pozycja, fokus, pierwsza seria wykresu; nigdy liczby wyniku) */
  --accent: #0F4C75;
  --accent-hover: #0D4366;
  --accent-active: #0B3A59;
  --on-accent: #FFFFFF;
  --accent-text: #0F4C75;        /* link, ikona aktywna, tekst informacji */
  --accent-bg: rgba(15, 76, 117, .08);
  --ring: #0F4C75;

  /* Ocena: korzystnie / niekorzystnie / ostrzeżenie (zawsze z drugim nośnikiem: znak, strzałka, słowo) */
  --profit: #0E7E5C;
  --loss: #8E1B08;
  --warn: #9A5800;
  --warn-bg: #FBF3E6;            /* tło noty ostrzegawczej */
  --info-bg: #EEF3F7;            /* tło noty informacyjnej i toastu */

  /* Wykresy: stała kolejność serii, maks. 6 */
  --chart-1: #0F4C75;            /* przychód, seria główna */
  --chart-2: #8E887F;            /* koszty (neutralne) */
  --chart-3: #7B6A9E;            /* podatki, seria pomocnicza (nie kolor ostrzeżenia) */
  --chart-4: #2E86C1;
  --chart-5: #A8507F;
  --chart-6: #6B665F;

  /* Kategoria kafla: linia u dołu (decyzja Wiktora 8.10, 22:47 i 22:53; DESIGN-SYSTEM.md §10). Tylko linie i znaczniki legendy, nigdy liczby ani tła */
  --cat-wynik: #4E9C2A;          /* zysk po i przed podatkiem, marża */
  --cat-przychod: #2F94E0;       /* przychód brutto i netto, zamówienia, AOV */
  --cat-reklamy: #5638B8;        /* ROAS, Break Even, Reklamy */
  --cat-koszty: #B8304E;         /* towar, wysyłka, prowizje, VAT, podatek dochodowy */

  /* Cienie (tylko jasny motyw; ciemny bez cienia karty) */
  --shadow: 0 1px 2px rgba(28, 27, 25, .05);
  --shadow-pop: 0 12px 32px rgba(28, 27, 25, .12), 0 2px 8px rgba(28, 27, 25, .06);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111110;
  --surface: #1A1A18;
  --surface-2: #20201E;
  --sidebar: #151514;
  --fill: rgba(242, 241, 238, .06);
  --fill-2: rgba(242, 241, 238, .10);
  --row-hover: rgba(242, 241, 238, .03);
  --overlay: rgba(0, 0, 0, .55);

  --text: #F2F1EE;
  --text-2: #9A958D;
  --control: #76716A;
  --hairline: rgba(242, 241, 238, .10);
  --grid: rgba(242, 241, 238, .08);

  --accent: #4FA3D9;
  --accent-hover: #63AFE0;
  --accent-active: #3E93C9;
  --on-accent: #0B1620;          /* ciemny tekst na jasnym akcencie */
  --accent-text: #7DBDE6;
  --accent-bg: rgba(79, 163, 217, .14);
  --ring: #7DBDE6;

  --profit: #6BE3A8;
  --loss: #E85A3A;
  --warn: #F2B44B;
  --warn-bg: #2A2316;
  --info-bg: #18232C;

  --chart-1: #4FA3D9;
  --chart-2: #6E6A63;
  --chart-3: #B9A7DE;
  --chart-4: #9FD3F2;
  --chart-5: #E59BC4;
  --chart-6: #9A958D;

  --cat-wynik: #86C944;
  --cat-przychod: #7AC3F6;
  --cat-reklamy: #A86BE6;
  --cat-koszty: #D9466F;

  --shadow: none;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
}

/* Wartości niezależne od motywu */
:root {
  /* Krój: Geist + Geist Mono, hostowane u nas (next/font, podzbiór latin-ext); makieta ładuje je z Google Fonts */
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Skala tekstu (px) */
  --t-h1: 24px;          /* tytuł strony, waga 650; telefon 21px */
  --t-big: 40px;         /* liczba główna w karcie wyróżnionej, waga 600 */
  --t-kpi-l: 30px;       /* wartość kafla L i XL */
  --t-kpi: 22px;         /* wartość kafla M */
  --t-kpi-s: 20px;       /* wartość kafla S; telefon 18px */
  --t-card: 15px;        /* tytuł karty, waga 600 */
  --t-body: 14px;        /* tekst podstawowy, interlinia 1,45 */
  --t-ui: 13.5px;        /* przyciski, pozycje podmenu, pola */
  --t-table: 13px;       /* komórka tabeli, nota */
  --t-meta: 12.5px;      /* etykieta kafla, podpowiedź karty */
  --t-small: 12px;       /* nagłówek tabeli (600), pomoc, legenda osi */

  /* Promienie */
  --r-xs: 6px;           /* pigułka małej podpowiedzi, fokus */
  --r-s: 7px;            /* btn-sm, segment wewnętrzny */
  --r-m: 9px;            /* przycisk, pole, kontrolka, klucz wykresu */
  --r-l: 12px;           /* karta, kafel, popover, nota (10px) */
  --r-xl: 16px;          /* modal, karta logowania */
  --r-pill: 999px;

  /* Odstępy: skala 4/8 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* Powłoka i rozmiary */
  --side-w: 264px;       /* sidebar rozwinięty */
  --side-w-min: 72px;    /* sidebar zwinięty do ikon */
  --drawer-w: 288px;     /* szuflada < 1024 px */
  --ctl-h: 34px;         /* przycisk, pole, kontrolka; telefon 40px */
  --ctl-h-s: 28px;       /* btn-sm, segment */
  --nav-h: 36px;         /* pozycja menu; podmenu 32px */
  --icon: 18px;          /* ikona Lucide, linia 1,75; w kontrolce 16px, w etykiecie 14px */
  --logo: 28px;          /* znak w sidebarze; zwinięty 30px, telefon 26px, logowanie 44px */
}