/*
 * Agents Stats — tokeny design systemu (makieta, wersja 2).
 *
 * Dwie warstwy:
 *   --base-*   paleta bazowa: surowe wartości. Używa jej WYŁĄCZNIE ten plik.
 *   --color-*, --font-*, --space-*, ...   tokeny semantyczne: jedyne, których
 *              używają komponenty i ekrany.
 *
 * Tryb kolorów: domyślnie według systemu (prefers-color-scheme); atrybut
 * data-theme="light" albo data-theme="dark" na <html> wymusza tryb.
 * Gęstość: data-density="comfortable" (domyślna — administracja, formularze)
 * albo data-density="compact" (ekran plansz, tabele z wieloma wierszami).
 *
 * Czcionki wyłącznie systemowe — strona nie pobiera niczego z sieci.
 *
 * Breakpointy (zmienne CSS nie działają w @media, więc wartości są tu do
 * odczytu, a w regułach @media wpisuje się te same liczby):
 *   web:     360 (telefon) · 720 (jedyny próg układu: ≤720 = układ telefonu)
 *            · 1024 (tablet) · 1440 (desktop)
 *   WebView: 360×800 · 412×915 (pion i poziom) · 800×1280
 */

:root {
    /* ------------------------------------------------ paleta bazowa: neutralne */
    --base-gray-0: #ffffff;
    --base-gray-25: #f7f8fa;
    --base-gray-50: #f0f2f5;
    --base-gray-100: #e3e7ec;
    --base-gray-200: #cdd3db;
    --base-gray-300: #9aa3b0;
    --base-gray-400: #7f8896;
    --base-gray-500: #5f6876;
    --base-gray-600: #4a5260;
    --base-gray-700: #353c48;
    --base-gray-800: #232832;
    --base-gray-850: #1a1f27;
    --base-gray-900: #13171d;
    --base-gray-950: #0c0f13;

    /* ------------------------------------------------ paleta bazowa: akcent (cyjan) */
    --base-cyan-100: #cff5fb;
    --base-cyan-300: #67dcef;
    --base-cyan-400: #2cc6e0;
    --base-cyan-500: #10a9c4;
    --base-cyan-700: #0b6b80;
    --base-cyan-800: #095566;
    --base-cyan-900: #06323d;
    --base-cyan-950: #03222a;

    /* ------------------------------------------------ paleta bazowa: stany */
    --base-green-100: #d5f5e6;
    --base-green-300: #5fdcaa;
    --base-green-700: #0a7a52;
    --base-green-950: #0b2a1f;
    --base-yellow-100: #fbf0c4;
    --base-yellow-300: #f2d04a;
    --base-yellow-700: #8a6206;
    --base-yellow-950: #2c2408;
    --base-amber-100: #fde6c8;
    --base-amber-300: #fbb454;
    --base-amber-700: #a14a06;
    --base-amber-950: #2f1d0a;
    --base-red-100: #fbdcdc;
    --base-red-300: #fb8a8a;
    --base-red-400: #f06a6e;
    --base-red-500: #e5484d;
    --base-red-600: #c8343a;
    --base-red-700: #b42328;
    --base-red-800: #93191e;
    --base-red-950: #331314;
    --base-blue-100: #dce8fd;
    --base-blue-300: #8ab4fb;
    --base-blue-700: #2457c5;
    --base-blue-950: #14213d;

    /* ------------------------------------------------ paleta bazowa: barwy ogólne (1D, QM_116) — kroki dopisane do istniejących */
    --base-orange-100: #fce7d9;
    --base-orange-300: #e4640f;
    --base-orange-400: #b6500c;
    --base-orange-500: #dc600e;
    --base-orange-700: #aa4a0b;
    --base-orange-950: #2e1c0f;
    --base-amber-400: #aa5907;
    --base-amber-500: #ce6b09;
    --base-yellow-400: #8a6a09;
    --base-yellow-500: #a7800b;
    --base-lime-100: #edf9dc;
    --base-lime-300: #6ba41b;
    --base-lime-400: #4f7a14;
    --base-lime-500: #619418;
    --base-lime-700: #4d7613;
    --base-lime-950: #212e0f;
    --base-green-400: #0a7f4f;
    --base-green-500: #0c995e;
    --base-teal-100: #dbfbf7;
    --base-teal-300: #15a698;
    --base-teal-400: #0f7c71;
    --base-teal-500: #139689;
    --base-teal-700: #0f786d;
    --base-teal-950: #0f2e2b;
    --base-cyan-600: #0e92ad;
    --base-blue-400: #2d68dd;
    --base-blue-500: #5383e3;
    --base-indigo-100: #dee0f7;
    --base-indigo-300: #7982de;
    --base-indigo-400: #5963d5;
    --base-indigo-500: #747ddc;
    --base-indigo-700: #4651d1;
    --base-indigo-950: #0f122e;
    --base-violet-100: #ebdff6;
    --base-violet-300: #c39cf6;
    --base-violet-400: #8f4ed0;
    --base-violet-500: #a36dd8;
    --base-violet-700: #7d3bc6;
    --base-violet-950: #1f0f2e;
    --base-pink-100: #f8ddeb;
    --base-pink-300: #df599c;
    --base-pink-400: #cc2779;
    --base-pink-500: #de5197;
    --base-pink-700: #b7236d;
    --base-pink-950: #2e0f1f;

    /* ------------------------------------------------ paleta bazowa: grupy ról (v2) */
    --base-role-inzynieria-strong: #16609e;
    --base-role-inzynieria-soft: #64b2f5;
    --base-role-analityka-dane-strong: #0b7462;
    --base-role-analityka-dane-soft: #3dd0a8;
    --base-role-marketing-sprzedaz-strong: #b9450b;
    --base-role-marketing-sprzedaz-soft: #fb9a52;
    --base-role-ludzie-organizacja-strong: #b3245f;
    --base-role-ludzie-organizacja-soft: #f285b5;
    --base-role-tresc-media-strong: #7d3bc6;
    --base-role-tresc-media-soft: #c39cf6;
    --base-role-finanse-prawo-strong: #7a6206;
    --base-role-finanse-prawo-soft: #d9bb4a;

    /* ------------------------------------------------ typografia (oba tryby) */
    --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-family-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Consolas, monospace;

    --font-size-xs: 0.6875rem;   /* 11px — etykiety pomocnicze, znaczniki */
    --font-size-sm: 0.8125rem;   /* 13px — tekst drugorzędny, tabele gęste */
    --font-size-md: 0.875rem;    /* 14px — tekst podstawowy */
    --font-size-lg: 1rem;        /* 16px — pola formularza na telefonie, wyróżnienia */
    --font-size-xl: 1.25rem;     /* 20px — nagłówek sekcji */
    --font-size-2xl: 1.5rem;     /* 24px — nagłówek strony */
    --font-size-3xl: 2rem;       /* 32px — liczba wiodąca (wersja, wartość) */

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-caps: 0.04em;

    /* ------------------------------------------------ odstępy (siatka 4 px) */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;   /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.25rem;  /* 20 */
    --space-6: 1.5rem;   /* 24 */
    --space-8: 2rem;     /* 32 */
    --space-10: 2.5rem;  /* 40 */
    --space-12: 3rem;    /* 48 */

    /* ------------------------------------------------ promienie */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* ------------------------------------------------ obramowania i fokus */
    --border-width: 1px;
    --border-width-strong: 2px;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    /* ------------------------------------------------ ruch */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --easing-exit: cubic-bezier(0.4, 0, 1, 1);

    /* ------------------------------------------------ warstwy */
    --z-base: 0;
    --z-sticky: 10;
    --z-nav: 20;
    --z-dropdown: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-toast: 60;

    /* ------------------------------------------------ układ */
    --layout-content-max: 72rem;   /* 1152px — treść na desktopie */
    --layout-narrow-max: 40rem;    /* 640px — formularze, strona pobierania */
    --layout-sidebar-width: 15rem; /* 240px — menu boczne */
    --layout-topbar-height: 3.25rem;
    --layout-bottomnav-height: 3.75rem;
    --layout-gutter: var(--space-4);
    --bp-phone: 360px;
    --bp-layout: 720px;
    --bp-tablet: 1024px;
    --bp-desktop: 1440px;
    --bp-webview-small: 360px;   /* 360×800 */
    --bp-webview-medium: 412px;  /* 412×915 */
    --bp-webview-tablet: 800px;  /* 800×1280 */

    /* ------------------------------------------------ gęstość: komfortowa (domyślna) */
    --density-control-height: 2.5rem;   /* 40px; na telefonie komponenty dają 44px */
    --density-control-padding-x: var(--space-3);
    --density-cell-padding-y: var(--space-3);
    --density-cell-padding-x: var(--space-4);
    --density-card-padding: var(--space-5);
    --density-gap: var(--space-4);
    --density-font-size: var(--font-size-md);

    /* ================================================ KOLORY — tryb jasny (domyślny bez preferencji) */
    color-scheme: light;

    /* tła warstw */
    --color-bg-canvas: var(--base-gray-50);
    --color-bg-surface: var(--base-gray-0);
    --color-bg-raised: var(--base-gray-0);
    --color-bg-sunken: var(--base-gray-25);
    --color-bg-hover: var(--base-gray-50);
    --color-bg-selected: var(--base-cyan-100);
    --color-bg-inverse: var(--base-gray-850);
    --color-scrim: rgb(12 15 19 / 0.5);

    /* tekst */
    --color-text-primary: var(--base-gray-900);
    --color-text-secondary: var(--base-gray-600);
    --color-text-disabled: var(--base-gray-400);
    --color-text-inverse: var(--base-gray-25);
    --color-text-link: var(--base-cyan-800);
    --color-text-on-accent: var(--base-gray-0);
    --color-text-on-danger: var(--base-gray-0);

    /* obramowania */
    --color-border-subtle: var(--base-gray-100);   /* podział dekoracyjny — bez wymogu kontrastu */
    --color-border-default: var(--base-gray-400);  /* granica kontrolki (pole, checkbox) — ≥ 3:1 */
    --color-border-strong: var(--base-gray-600);

    /* akcent i fokus */
    --color-accent: var(--base-cyan-700);
    --color-accent-hover: var(--base-cyan-800);
    --color-accent-active: var(--base-cyan-900);
    --color-accent-subtle: var(--base-cyan-100);
    --color-focus-ring: var(--base-blue-700);

    /* akcja niebezpieczna */
    --color-danger: var(--base-red-700);
    --color-danger-hover: var(--base-red-800);
    --color-danger-active: var(--base-red-800);

    /* komunikaty: błąd / ostrzeżenie / OK / info */
    --color-feedback-error-fg: var(--base-red-700);
    --color-feedback-error-bg: var(--base-red-100);
    --color-feedback-error-border: var(--base-red-700);
    --color-feedback-warning-fg: var(--base-amber-700);
    --color-feedback-warning-bg: var(--base-amber-100);
    --color-feedback-warning-border: var(--base-amber-700);
    --color-feedback-success-fg: var(--base-green-700);
    --color-feedback-success-bg: var(--base-green-100);
    --color-feedback-success-border: var(--base-green-700);
    --color-feedback-info-fg: var(--base-blue-700);
    --color-feedback-info-bg: var(--base-blue-100);
    --color-feedback-info-border: var(--base-blue-700);

    /* neutralny znacznik (np. „wyłączone”, „poza ekranem”) */
    --color-neutral-fg: var(--base-gray-600);
    --color-neutral-bg: var(--base-gray-50);

    /* progi skali (domyślne pasma z kodu: <40, ≥40, ≥70, ≥90) */
    --color-threshold-1: var(--base-green-700);
    --color-threshold-2: var(--base-yellow-700);
    --color-threshold-3: var(--base-amber-700);
    --color-threshold-4: var(--base-red-700);

    /* grupy ról agentów (v2): koło awatara (bg) i ikona na nim (fg); zawsze z etykietą roli obok */
    --color-role-inzynieria-bg: var(--base-role-inzynieria-strong);
    --color-role-inzynieria-fg: var(--base-gray-0);
    --color-role-analityka-dane-bg: var(--base-role-analityka-dane-strong);
    --color-role-analityka-dane-fg: var(--base-gray-0);
    --color-role-marketing-sprzedaz-bg: var(--base-role-marketing-sprzedaz-strong);
    --color-role-marketing-sprzedaz-fg: var(--base-gray-0);
    --color-role-ludzie-organizacja-bg: var(--base-role-ludzie-organizacja-strong);
    --color-role-ludzie-organizacja-fg: var(--base-gray-0);
    --color-role-tresc-media-bg: var(--base-role-tresc-media-strong);
    --color-role-tresc-media-fg: var(--base-gray-0);
    --color-role-finanse-prawo-bg: var(--base-role-finanse-prawo-strong);
    --color-role-finanse-prawo-fg: var(--base-gray-0);

    /* v2: fokus na ciemnym tle w trybie jasnym (toast na bg-inverse) */
    --color-focus-ring-inverse: var(--base-blue-300);
    /* v2: szkielet ładowania — element dekoracyjny, widoczny na canvas i surface */
    --color-skeleton: var(--base-gray-200);
    /* v2: cień krawędzi przewijanej treści (tabela na telefonie); w trybie ciemnym jasna poświata (v2b) */
    --color-scroll-shadow: rgb(12 15 19 / 0.22);

    /* cienie */
    --shadow-sm: 0 1px 2px rgb(12 15 19 / 0.08);
    --shadow-md: 0 4px 12px rgb(12 15 19 / 0.12);
    --shadow-lg: 0 12px 32px rgb(12 15 19 / 0.18);

    /* paleta ogólna (1D, QM_116): 12 barw × 3 odcienie — fg: tekst i ikona (≥ 4,5:1 na tłach warstw i na -bg),
       solid: kropka, pasek, wypełnienie (≥ 3:1 na tłach warstw), bg: tło znacznika pod -fg. Lista dla walidatora: palette.json */
    --color-red-fg: var(--base-red-700);
    --color-red-solid: var(--base-red-500);
    --color-red-bg: var(--base-red-100);
    --color-orange-fg: var(--base-orange-700);
    --color-orange-solid: var(--base-orange-500);
    --color-orange-bg: var(--base-orange-100);
    --color-amber-fg: var(--base-amber-700);
    --color-amber-solid: var(--base-amber-500);
    --color-amber-bg: var(--base-amber-100);
    --color-yellow-fg: var(--base-yellow-700);
    --color-yellow-solid: var(--base-yellow-500);
    --color-yellow-bg: var(--base-yellow-100);
    --color-lime-fg: var(--base-lime-700);
    --color-lime-solid: var(--base-lime-500);
    --color-lime-bg: var(--base-lime-100);
    --color-green-fg: var(--base-green-700);
    --color-green-solid: var(--base-green-500);
    --color-green-bg: var(--base-green-100);
    --color-teal-fg: var(--base-teal-700);
    --color-teal-solid: var(--base-teal-500);
    --color-teal-bg: var(--base-teal-100);
    --color-cyan-fg: var(--base-cyan-700);
    --color-cyan-solid: var(--base-cyan-600);
    --color-cyan-bg: var(--base-cyan-100);
    --color-blue-fg: var(--base-blue-700);
    --color-blue-solid: var(--base-blue-500);
    --color-blue-bg: var(--base-blue-100);
    --color-indigo-fg: var(--base-indigo-700);
    --color-indigo-solid: var(--base-indigo-500);
    --color-indigo-bg: var(--base-indigo-100);
    --color-violet-fg: var(--base-violet-700);
    --color-violet-solid: var(--base-violet-500);
    --color-violet-bg: var(--base-violet-100);
    --color-pink-fg: var(--base-pink-700);
    --color-pink-solid: var(--base-pink-500);
    --color-pink-bg: var(--base-pink-100);
    /* stany sesji (10 × color-session-*, szablony domyślne 019): aliasy palety — w obu trybach te same nazwy, wartości z trybu */
    --color-session-error-terminal: var(--color-red-fg);
    --color-session-error-retry: var(--color-red-fg);
    --color-session-compact: var(--color-violet-fg);
    --color-session-new: var(--color-blue-fg);
    --color-session-active: var(--color-green-fg);
    --color-session-active-bg: var(--color-green-fg);
    --color-session-paused-permission: var(--color-amber-fg);
    --color-session-paused-question: var(--color-amber-fg);
    --color-session-idle: var(--color-neutral-fg);
    --color-session-idle-bg: var(--color-neutral-fg);

    /* ------------------------------------------------ aliasy domenowe (wskazują na semantyczne wyżej) */
    /* stan źródła telemetrii — public/app/app.js:2058-2064 */
    --color-status-source-ok-fg: var(--color-feedback-success-fg);
    --color-status-source-ok-bg: var(--color-feedback-success-bg);
    --color-status-source-waiting-fg: var(--color-feedback-warning-fg);
    --color-status-source-waiting-bg: var(--color-feedback-warning-bg);
    --color-status-source-error-fg: var(--color-feedback-error-fg);
    --color-status-source-error-bg: var(--color-feedback-error-bg);
    --color-status-source-disabled-fg: var(--color-neutral-fg);
    --color-status-source-disabled-bg: var(--color-neutral-bg);
    /* połączenie strony z usługą — public/app/app.js:6501/6505, display.js:94/117 */
    --color-status-connection-live: var(--color-feedback-success-fg);
    --color-status-connection-lost: var(--color-feedback-error-fg);
}

/* ================================================ KOLORY — tryb ciemny */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg-canvas: var(--base-gray-950);
        --color-bg-surface: var(--base-gray-900);
        --color-bg-raised: var(--base-gray-850);
        --color-bg-sunken: var(--base-gray-950);
        --color-bg-hover: var(--base-gray-800);
        --color-bg-selected: var(--base-cyan-950);
        --color-bg-inverse: var(--base-gray-50);
        --color-scrim: rgb(0 0 0 / 0.6);
        --color-text-primary: var(--base-gray-50);
        --color-text-secondary: var(--base-gray-300);
        --color-text-disabled: var(--base-gray-400);
        --color-text-inverse: var(--base-gray-900);
        --color-text-link: var(--base-cyan-300);
        --color-text-on-accent: var(--base-cyan-950);
        --color-text-on-danger: var(--base-gray-950);
        --color-border-subtle: var(--base-gray-800);
        --color-border-default: var(--base-gray-400);
        --color-border-strong: var(--base-gray-300);
        --color-accent: var(--base-cyan-400);
        --color-accent-hover: var(--base-cyan-300);
        --color-accent-active: var(--base-cyan-500);
        --color-accent-subtle: var(--base-cyan-950);
        --color-focus-ring: var(--base-blue-300);
        --color-danger: var(--base-red-500);
        --color-danger-hover: var(--base-red-400);
        --color-danger-active: var(--base-red-300);
        --color-feedback-error-fg: var(--base-red-300);
        --color-feedback-error-bg: var(--base-red-950);
        --color-feedback-error-border: var(--base-red-300);
        --color-feedback-warning-fg: var(--base-amber-300);
        --color-feedback-warning-bg: var(--base-amber-950);
        --color-feedback-warning-border: var(--base-amber-300);
        --color-feedback-success-fg: var(--base-green-300);
        --color-feedback-success-bg: var(--base-green-950);
        --color-feedback-success-border: var(--base-green-300);
        --color-feedback-info-fg: var(--base-blue-300);
        --color-feedback-info-bg: var(--base-blue-950);
        --color-feedback-info-border: var(--base-blue-300);
        --color-neutral-fg: var(--base-gray-300);
        --color-neutral-bg: var(--base-gray-800);
        --color-threshold-1: var(--base-green-300);
        --color-threshold-2: var(--base-yellow-300);
        --color-threshold-3: var(--base-amber-300);
        --color-threshold-4: var(--base-red-300);
        --color-role-inzynieria-bg: var(--base-role-inzynieria-soft);
        --color-role-inzynieria-fg: var(--base-gray-950);
        --color-role-analityka-dane-bg: var(--base-role-analityka-dane-soft);
        --color-role-analityka-dane-fg: var(--base-gray-950);
        --color-role-marketing-sprzedaz-bg: var(--base-role-marketing-sprzedaz-soft);
        --color-role-marketing-sprzedaz-fg: var(--base-gray-950);
        --color-role-ludzie-organizacja-bg: var(--base-role-ludzie-organizacja-soft);
        --color-role-ludzie-organizacja-fg: var(--base-gray-950);
        --color-role-tresc-media-bg: var(--base-role-tresc-media-soft);
        --color-role-tresc-media-fg: var(--base-gray-950);
        --color-role-finanse-prawo-bg: var(--base-role-finanse-prawo-soft);
        /* paleta ogólna (1D): fg ≥ 4,5:1, solid ≥ 3:1 na ciemnych tłach warstw */
        --color-red-fg: var(--base-red-300);
        --color-red-solid: var(--base-red-400);
        --color-red-bg: var(--base-red-950);
        --color-orange-fg: var(--base-orange-300);
        --color-orange-solid: var(--base-orange-400);
        --color-orange-bg: var(--base-orange-950);
        --color-amber-fg: var(--base-amber-300);
        --color-amber-solid: var(--base-amber-400);
        --color-amber-bg: var(--base-amber-950);
        --color-yellow-fg: var(--base-yellow-300);
        --color-yellow-solid: var(--base-yellow-400);
        --color-yellow-bg: var(--base-yellow-950);
        --color-lime-fg: var(--base-lime-300);
        --color-lime-solid: var(--base-lime-400);
        --color-lime-bg: var(--base-lime-950);
        --color-green-fg: var(--base-green-300);
        --color-green-solid: var(--base-green-400);
        --color-green-bg: var(--base-green-950);
        --color-teal-fg: var(--base-teal-300);
        --color-teal-solid: var(--base-teal-400);
        --color-teal-bg: var(--base-teal-950);
        --color-cyan-fg: var(--base-cyan-300);
        --color-cyan-solid: var(--base-cyan-400);
        --color-cyan-bg: var(--base-cyan-950);
        --color-blue-fg: var(--base-blue-300);
        --color-blue-solid: var(--base-blue-400);
        --color-blue-bg: var(--base-blue-950);
        --color-indigo-fg: var(--base-indigo-300);
        --color-indigo-solid: var(--base-indigo-400);
        --color-indigo-bg: var(--base-indigo-950);
        --color-violet-fg: var(--base-violet-300);
        --color-violet-solid: var(--base-violet-400);
        --color-violet-bg: var(--base-violet-950);
        --color-pink-fg: var(--base-pink-300);
        --color-pink-solid: var(--base-pink-400);
        --color-pink-bg: var(--base-pink-950);
        --color-role-finanse-prawo-fg: var(--base-gray-950);
        --color-focus-ring-inverse: var(--base-blue-700);
        --color-skeleton: var(--base-gray-700);
        --color-scroll-shadow: rgb(255 255 255 / 0.2);
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
        --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg-canvas: var(--base-gray-950);
    --color-bg-surface: var(--base-gray-900);
    --color-bg-raised: var(--base-gray-850);
    --color-bg-sunken: var(--base-gray-950);
    --color-bg-hover: var(--base-gray-800);
    --color-bg-selected: var(--base-cyan-950);
    --color-bg-inverse: var(--base-gray-50);
    --color-scrim: rgb(0 0 0 / 0.6);
    --color-text-primary: var(--base-gray-50);
    --color-text-secondary: var(--base-gray-300);
    --color-text-disabled: var(--base-gray-400);
    --color-text-inverse: var(--base-gray-900);
    --color-text-link: var(--base-cyan-300);
    --color-text-on-accent: var(--base-cyan-950);
    --color-text-on-danger: var(--base-gray-950);
    --color-border-subtle: var(--base-gray-800);
    --color-border-default: var(--base-gray-400);
    --color-border-strong: var(--base-gray-300);
    --color-accent: var(--base-cyan-400);
    --color-accent-hover: var(--base-cyan-300);
    --color-accent-active: var(--base-cyan-500);
    --color-accent-subtle: var(--base-cyan-950);
    --color-focus-ring: var(--base-blue-300);
    --color-danger: var(--base-red-500);
    --color-danger-hover: var(--base-red-400);
    --color-danger-active: var(--base-red-300);
    --color-feedback-error-fg: var(--base-red-300);
    --color-feedback-error-bg: var(--base-red-950);
    --color-feedback-error-border: var(--base-red-300);
    --color-feedback-warning-fg: var(--base-amber-300);
    --color-feedback-warning-bg: var(--base-amber-950);
    --color-feedback-warning-border: var(--base-amber-300);
    --color-feedback-success-fg: var(--base-green-300);
    --color-feedback-success-bg: var(--base-green-950);
    --color-feedback-success-border: var(--base-green-300);
    --color-feedback-info-fg: var(--base-blue-300);
    --color-feedback-info-bg: var(--base-blue-950);
    --color-feedback-info-border: var(--base-blue-300);
    --color-neutral-fg: var(--base-gray-300);
    --color-neutral-bg: var(--base-gray-800);
    --color-threshold-1: var(--base-green-300);
    --color-threshold-2: var(--base-yellow-300);
    --color-threshold-3: var(--base-amber-300);
    --color-threshold-4: var(--base-red-300);
    --color-role-inzynieria-bg: var(--base-role-inzynieria-soft);
    --color-role-inzynieria-fg: var(--base-gray-950);
    --color-role-analityka-dane-bg: var(--base-role-analityka-dane-soft);
    --color-role-analityka-dane-fg: var(--base-gray-950);
    --color-role-marketing-sprzedaz-bg: var(--base-role-marketing-sprzedaz-soft);
    --color-role-marketing-sprzedaz-fg: var(--base-gray-950);
    --color-role-ludzie-organizacja-bg: var(--base-role-ludzie-organizacja-soft);
    --color-role-ludzie-organizacja-fg: var(--base-gray-950);
    --color-role-tresc-media-bg: var(--base-role-tresc-media-soft);
    --color-role-tresc-media-fg: var(--base-gray-950);
    --color-role-finanse-prawo-bg: var(--base-role-finanse-prawo-soft);
    /* paleta ogólna (1D): fg ≥ 4,5:1, solid ≥ 3:1 na ciemnych tłach warstw */
    --color-red-fg: var(--base-red-300);
    --color-red-solid: var(--base-red-400);
    --color-red-bg: var(--base-red-950);
    --color-orange-fg: var(--base-orange-300);
    --color-orange-solid: var(--base-orange-400);
    --color-orange-bg: var(--base-orange-950);
    --color-amber-fg: var(--base-amber-300);
    --color-amber-solid: var(--base-amber-400);
    --color-amber-bg: var(--base-amber-950);
    --color-yellow-fg: var(--base-yellow-300);
    --color-yellow-solid: var(--base-yellow-400);
    --color-yellow-bg: var(--base-yellow-950);
    --color-lime-fg: var(--base-lime-300);
    --color-lime-solid: var(--base-lime-400);
    --color-lime-bg: var(--base-lime-950);
    --color-green-fg: var(--base-green-300);
    --color-green-solid: var(--base-green-400);
    --color-green-bg: var(--base-green-950);
    --color-teal-fg: var(--base-teal-300);
    --color-teal-solid: var(--base-teal-400);
    --color-teal-bg: var(--base-teal-950);
    --color-cyan-fg: var(--base-cyan-300);
    --color-cyan-solid: var(--base-cyan-400);
    --color-cyan-bg: var(--base-cyan-950);
    --color-blue-fg: var(--base-blue-300);
    --color-blue-solid: var(--base-blue-400);
    --color-blue-bg: var(--base-blue-950);
    --color-indigo-fg: var(--base-indigo-300);
    --color-indigo-solid: var(--base-indigo-400);
    --color-indigo-bg: var(--base-indigo-950);
    --color-violet-fg: var(--base-violet-300);
    --color-violet-solid: var(--base-violet-400);
    --color-violet-bg: var(--base-violet-950);
    --color-pink-fg: var(--base-pink-300);
    --color-pink-solid: var(--base-pink-400);
    --color-pink-bg: var(--base-pink-950);
    --color-role-finanse-prawo-fg: var(--base-gray-950);
    --color-focus-ring-inverse: var(--base-blue-700);
    --color-skeleton: var(--base-gray-700);
    --color-scroll-shadow: rgb(255 255 255 / 0.2);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
}

/* ================================================ gęstość: zwarta (ekran plansz, tabele) */
:root[data-density="compact"] {
    --density-control-height: 2rem;     /* 32px */
    --density-control-padding-x: var(--space-2);
    --density-cell-padding-y: var(--space-1);
    --density-cell-padding-x: var(--space-3);
    --density-card-padding: var(--space-3);
    --density-gap: var(--space-2);
    --density-font-size: var(--font-size-sm);
}