/*!
 * 360commerce UI — design tokens
 * Źródło prawdy: repo 360commerce/360commerce-app-design-system (pb_public/app/ui/tokens.css).
 * Panel serwuje kopię pod /sdk/ui/tokens.css (scripts/sync-design-system.sh w repo panelu).
 * NIE edytuj kopii w panelu ani w apkach — zmiana idzie tutaj, potem synchronizacja.
 *
 * Warstwy:
 *   1. Prymitywy (skale) — --ui-gray-*, --ui-primary-* (akcent), stałe tonów.
 *   2. Semantyka — --ui-bg, --ui-surface, --ui-text… — TYLKO tych używają komponenty.
 *   3. Skale nie-kolorowe — odstępy, promienie, typografia, cienie, ruch, warstwy, ekran mobilny.
 *
 * Apka mobilna (React Native) nie czyta CSS — te same wartości ma tokens.json obok (jedno źródło,
 * dwa formaty). Zmiana tokenu tutaj = ta sama zmiana w tokens.json (pilnuje jej katalog, zakładka „Mobile").
 *
 * Motyw:  .dark albo [data-theme="dark"] na dowolnym przodku (panel: <html class="dark">,
 *         portal: <body class="dark">, apki: <html data-theme="dark">).
 * Akcent: [data-accent="blue|violet|orange|red|teal|pink"] — domyślnie zielony marki.
 *
 * Semantyka jest deklarowana na :root ORAZ na każdym elemencie z motywem/akcentem
 * (`:where(...)` = zerowa specyficzność), bo zmienna odwołująca się do innej zmiennej
 * jest liczona tam, gdzie ją zadeklarowano — inaczej akcent ustawiony na <body>
 * nie zmieniłby --ui-primary policzonego na <html>. Skale akcentów mają za to
 * specyficzność atrybutu (0,1,0) i stoją PO :root, żeby wygrać z domyślną zieloną
 * także wtedy, gdy data-accent siedzi na samym <html>.
 */

/* ── 1. Prymitywy ─────────────────────────────────────────────────────────── */

:root {
    /* Szarości (Tailwind gray — ta sama skala co panel) */
    --ui-gray-50: #f9fafb;
    --ui-gray-100: #f3f4f6;
    --ui-gray-200: #e5e7eb;
    --ui-gray-300: #d1d5db;
    --ui-gray-400: #9ca3af;
    --ui-gray-500: #6b7280;
    --ui-gray-600: #4b5563;
    --ui-gray-700: #374151;
    --ui-gray-800: #1f2937;
    --ui-gray-900: #111827;
    --ui-gray-950: #030712;

    /* Akcent: zielony marki 360commerce (#00AB59) */
    --ui-primary-50: #ecfdf3;
    --ui-primary-100: #d1fae2;
    --ui-primary-200: #a7f3c8;
    --ui-primary-300: #6ee7a7;
    --ui-primary-400: #34d382;
    --ui-primary-500: #00ab59;
    --ui-primary-600: #00954f;
    --ui-primary-700: #007a42;
    --ui-primary-800: #066138;
    --ui-primary-900: #054f2f;
    --ui-primary-950: #03321e;
    --ui-primary-gradient: linear-gradient(118deg, #027c52 0%, #009556 28%, #00ab59 58%, #12b86c 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(0 120 75 / 0.38);
}

[data-accent='blue'] {
    --ui-primary-50: #eff6ff;
    --ui-primary-100: #dbeafe;
    --ui-primary-200: #bfdbfe;
    --ui-primary-300: #93c5fd;
    --ui-primary-400: #60a5fa;
    --ui-primary-500: #3b82f6;
    --ui-primary-600: #2563eb;
    --ui-primary-700: #1d4ed8;
    --ui-primary-800: #1e40af;
    --ui-primary-900: #1e3a8a;
    --ui-primary-950: #172554;
    --ui-primary-gradient: linear-gradient(118deg, #1d4ed8 0%, #2563eb 28%, #3b82f6 58%, #60a5fa 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(37 99 235 / 0.38);
}

[data-accent='violet'] {
    --ui-primary-50: #f5f3ff;
    --ui-primary-100: #ede9fe;
    --ui-primary-200: #ddd6fe;
    --ui-primary-300: #c4b5fd;
    --ui-primary-400: #a78bfa;
    --ui-primary-500: #8b5cf6;
    --ui-primary-600: #7c3aed;
    --ui-primary-700: #6d28d9;
    --ui-primary-800: #5b21b6;
    --ui-primary-900: #4c1d95;
    --ui-primary-950: #2e1065;
    --ui-primary-gradient: linear-gradient(118deg, #6d28d9 0%, #7c3aed 28%, #8b5cf6 58%, #a78bfa 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(124 58 237 / 0.38);
}

[data-accent='orange'] {
    --ui-primary-50: #fff7ed;
    --ui-primary-100: #ffedd5;
    --ui-primary-200: #fed7aa;
    --ui-primary-300: #fdba74;
    --ui-primary-400: #fb923c;
    --ui-primary-500: #f97316;
    --ui-primary-600: #ea580c;
    --ui-primary-700: #c2410c;
    --ui-primary-800: #9a3412;
    --ui-primary-900: #7c2d12;
    --ui-primary-950: #431407;
    --ui-primary-gradient: linear-gradient(118deg, #c2410c 0%, #ea580c 28%, #f97316 58%, #fb923c 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(234 88 12 / 0.38);
}

[data-accent='red'] {
    --ui-primary-50: #fef2f2;
    --ui-primary-100: #fee2e2;
    --ui-primary-200: #fecaca;
    --ui-primary-300: #fca5a5;
    --ui-primary-400: #f87171;
    --ui-primary-500: #ef4444;
    --ui-primary-600: #dc2626;
    --ui-primary-700: #b91c1c;
    --ui-primary-800: #991b1b;
    --ui-primary-900: #7f1d1d;
    --ui-primary-950: #450a0a;
    --ui-primary-gradient: linear-gradient(118deg, #b91c1c 0%, #dc2626 28%, #ef4444 58%, #f87171 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(220 38 38 / 0.38);
}

[data-accent='teal'] {
    --ui-primary-50: #f0fdfa;
    --ui-primary-100: #ccfbf1;
    --ui-primary-200: #99f6e4;
    --ui-primary-300: #5eead4;
    --ui-primary-400: #2dd4bf;
    --ui-primary-500: #14b8a6;
    --ui-primary-600: #0d9488;
    --ui-primary-700: #0f766e;
    --ui-primary-800: #115e59;
    --ui-primary-900: #134e4a;
    --ui-primary-950: #042f2e;
    --ui-primary-gradient: linear-gradient(118deg, #0f766e 0%, #0d9488 28%, #14b8a6 58%, #2dd4bf 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(13 148 136 / 0.38);
}

[data-accent='pink'] {
    --ui-primary-50: #fdf2f8;
    --ui-primary-100: #fce7f3;
    --ui-primary-200: #fbcfe8;
    --ui-primary-300: #f9a8d4;
    --ui-primary-400: #f472b6;
    --ui-primary-500: #ec4899;
    --ui-primary-600: #db2777;
    --ui-primary-700: #be185d;
    --ui-primary-800: #9d174d;
    --ui-primary-900: #831843;
    --ui-primary-950: #500724;
    --ui-primary-gradient: linear-gradient(118deg, #be185d 0%, #db2777 28%, #ec4899 58%, #f472b6 100%);
    --ui-primary-glow: 0 2px 10px -3px rgb(219 39 119 / 0.38);
}

/* ── 2. Semantyka — motyw jasny ───────────────────────────────────────────── */

:where(:root, .light, .dark, [data-theme], [data-accent]) {
    color-scheme: light;

    /* Powierzchnie */
    --ui-bg: var(--ui-gray-50);
    --ui-surface: #ffffff;
    --ui-surface-raised: #ffffff;
    --ui-surface-sunken: var(--ui-gray-50);
    --ui-fill: rgb(3 7 18 / 0.04);
    --ui-fill-hover: rgb(3 7 18 / 0.07);
    --ui-fill-strong: rgb(3 7 18 / 0.1);
    --ui-overlay: rgb(17 24 39 / 0.45);

    /* Obramowania */
    --ui-border: var(--ui-gray-200);
    --ui-border-muted: rgb(229 231 235 / 0.7);
    --ui-border-strong: var(--ui-gray-300);

    /* Tekst */
    --ui-text: var(--ui-gray-900);
    --ui-text-secondary: var(--ui-gray-700);
    --ui-text-muted: var(--ui-gray-500);
    --ui-text-subtle: var(--ui-gray-400);
    --ui-text-disabled: var(--ui-gray-300);
    --ui-text-inverse: #ffffff;

    /* Akcent (wynikowy — komponenty czytają TE, nie skalę) */
    --ui-primary: var(--ui-primary-500);
    --ui-primary-hover: var(--ui-primary-600);
    --ui-primary-active: var(--ui-primary-700);
    --ui-primary-soft: var(--ui-primary-50);
    --ui-primary-soft-hover: var(--ui-primary-100);
    --ui-primary-text: var(--ui-primary-600);
    --ui-primary-border: var(--ui-primary-200);
    --ui-on-primary: #ffffff;
    --ui-on-primary-muted: rgb(255 255 255 / 0.82);
    --ui-on-primary-fill: rgb(255 255 255 / 0.18);
    --ui-on-primary-fill-hover: rgb(255 255 255 / 0.28);
    --ui-on-primary-border: rgb(255 255 255 / 0.32);
    --ui-focus-ring: color-mix(in srgb, var(--ui-primary-500) 30%, transparent);

    /* Pola formularzy */
    --ui-input-bg: #ffffff;
    --ui-input-border: var(--ui-gray-300);
    --ui-input-border-hover: var(--ui-gray-400);
    --ui-input-placeholder: var(--ui-gray-400);

    /* Tony stanów: solid (tło pełne), soft (tło delikatne), text (na soft), border */
    --ui-success: #16a34a;
    --ui-success-soft: #f0fdf4;
    --ui-success-text: #15803d;
    --ui-success-border: #bbf7d0;
    --ui-warning: #d97706;
    --ui-warning-soft: #fffbeb;
    --ui-warning-text: #b45309;
    --ui-warning-border: #fde68a;
    --ui-danger: #dc2626;
    --ui-danger-hover: #b91c1c;
    --ui-danger-soft: #fef2f2;
    --ui-danger-text: #b91c1c;
    --ui-danger-border: #fecaca;
    --ui-info: #2563eb;
    --ui-info-soft: #eff6ff;
    --ui-info-text: #1d4ed8;
    --ui-info-border: #bfdbfe;
    --ui-neutral: var(--ui-gray-500);
    --ui-neutral-soft: var(--ui-gray-100);
    --ui-neutral-text: var(--ui-gray-700);
    --ui-neutral-border: var(--ui-gray-200);

    /* Statusy zadań (App\Enums\TaskStatus) — tło + tekst pigułki */
    --ui-status-requested-bg: rgb(129 140 248 / 0.16);
    --ui-status-requested-text: #3730a3;
    --ui-status-quoted-bg: rgb(45 212 191 / 0.14);
    --ui-status-quoted-text: #0f766e;
    --ui-status-draft-bg: rgb(156 163 175 / 0.15);
    --ui-status-draft-text: #374151;
    --ui-status-planned-bg: rgb(56 189 248 / 0.15);
    --ui-status-planned-text: #075985;
    --ui-status-in_progress-bg: rgb(168 85 247 / 0.15);
    --ui-status-in_progress-text: #6b21a8;
    --ui-status-paused-bg: rgb(251 146 60 / 0.15);
    --ui-status-paused-text: #9a3412;
    --ui-status-to_settle-bg: rgb(251 113 133 / 0.15);
    --ui-status-to_settle-text: #9f1239;
    --ui-status-to_review-bg: rgb(250 204 21 / 0.18);
    --ui-status-to_review-text: #854d0e;
    --ui-status-to_fix-bg: rgb(248 113 113 / 0.15);
    --ui-status-to_fix-text: #991b1b;
    --ui-status-accepted-bg: rgb(45 212 191 / 0.18);
    --ui-status-accepted-text: #115e59;
    --ui-status-done-bg: rgb(74 222 128 / 0.15);
    --ui-status-done-text: #166534;
    --ui-status-cancelled-bg: rgb(107 114 128 / 0.12);
    --ui-status-cancelled-text: #4b5563;

    /* Cienie */
    /* Cienie wielowarstwowe (wzorzec Geist): cienka krawędź + bliski cień kontaktowy + miękkie rozproszenie.
       Skala rośnie z „wysokością": karta → menu → modal. */
    --ui-shadow-xs: 0 0 0 1px rgb(3 7 18 / 0.03), 0 1px 2px 0 rgb(3 7 18 / 0.05);
    --ui-shadow-sm: 0 0 0 1px rgb(3 7 18 / 0.03), 0 1px 2px 0 rgb(3 7 18 / 0.06), 0 2px 6px -2px rgb(3 7 18 / 0.08);
    --ui-shadow-md: 0 0 0 1px rgb(3 7 18 / 0.04), 0 2px 4px -1px rgb(3 7 18 / 0.06), 0 8px 16px -4px rgb(3 7 18 / 0.12);
    --ui-shadow-lg: 0 0 0 1px rgb(3 7 18 / 0.04), 0 4px 8px -2px rgb(3 7 18 / 0.08), 0 16px 32px -8px rgb(3 7 18 / 0.16);
    --ui-shadow-xl: 0 0 0 1px rgb(3 7 18 / 0.05), 0 8px 16px -4px rgb(3 7 18 / 0.1), 0 32px 64px -16px rgb(3 7 18 / 0.22);
    --ui-shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 0.22);
    --ui-shadow-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.6);   /* jasna krawędź od góry na uniesionej powierzchni */
}

/* ── 2b. Semantyka — motyw ciemny ─────────────────────────────────────────── */

:where(.dark, [data-theme='dark']) {
    color-scheme: dark;

    --ui-bg: var(--ui-gray-950);
    --ui-surface: var(--ui-gray-900);
    --ui-surface-raised: #161e2e;
    --ui-surface-sunken: rgb(0 0 0 / 0.2);
    --ui-fill: rgb(255 255 255 / 0.05);
    --ui-fill-hover: rgb(255 255 255 / 0.08);
    --ui-fill-strong: rgb(255 255 255 / 0.12);
    --ui-overlay: rgb(3 7 18 / 0.7);

    --ui-border: rgb(255 255 255 / 0.1);
    --ui-border-muted: rgb(255 255 255 / 0.06);
    --ui-border-strong: rgb(255 255 255 / 0.2);

    --ui-text: var(--ui-gray-100);
    --ui-text-secondary: var(--ui-gray-300);
    --ui-text-muted: var(--ui-gray-400);
    --ui-text-subtle: var(--ui-gray-500);
    --ui-text-disabled: var(--ui-gray-600);
    --ui-text-inverse: var(--ui-gray-950);

    --ui-primary-soft: color-mix(in srgb, var(--ui-primary-500) 16%, transparent);
    --ui-primary-soft-hover: color-mix(in srgb, var(--ui-primary-500) 24%, transparent);
    --ui-primary-text: var(--ui-primary-400);
    --ui-primary-border: color-mix(in srgb, var(--ui-primary-500) 40%, transparent);
    --ui-focus-ring: color-mix(in srgb, var(--ui-primary-400) 35%, transparent);

    --ui-input-bg: rgb(255 255 255 / 0.05);
    --ui-input-border: rgb(255 255 255 / 0.12);
    --ui-input-border-hover: rgb(255 255 255 / 0.22);
    --ui-input-placeholder: var(--ui-gray-500);

    --ui-success: #22c55e;
    --ui-success-soft: rgb(34 197 94 / 0.12);
    --ui-success-text: #4ade80;
    --ui-success-border: rgb(34 197 94 / 0.3);
    --ui-warning: #f59e0b;
    --ui-warning-soft: rgb(245 158 11 / 0.12);
    --ui-warning-text: #fbbf24;
    --ui-warning-border: rgb(245 158 11 / 0.3);
    --ui-danger: #ef4444;
    --ui-danger-hover: #dc2626;
    --ui-danger-soft: rgb(239 68 68 / 0.12);
    --ui-danger-text: #f87171;
    --ui-danger-border: rgb(239 68 68 / 0.3);
    --ui-info: #3b82f6;
    --ui-info-soft: rgb(59 130 246 / 0.12);
    --ui-info-text: #60a5fa;
    --ui-info-border: rgb(59 130 246 / 0.3);
    --ui-neutral: var(--ui-gray-400);
    --ui-neutral-soft: rgb(255 255 255 / 0.06);
    --ui-neutral-text: var(--ui-gray-300);
    --ui-neutral-border: rgb(255 255 255 / 0.1);

    --ui-status-requested-bg: #312e81;
    --ui-status-requested-text: #c7d2fe;
    --ui-status-quoted-bg: #134e4a;
    --ui-status-quoted-text: #5eead4;
    --ui-status-draft-bg: #1f2937;
    --ui-status-draft-text: #d1d5db;
    --ui-status-planned-bg: #0c4a6e;
    --ui-status-planned-text: #7dd3fc;
    --ui-status-in_progress-bg: #581c87;
    --ui-status-in_progress-text: #d8b4fe;
    --ui-status-paused-bg: #7c2d12;
    --ui-status-paused-text: #fdba74;
    --ui-status-to_settle-bg: #881337;
    --ui-status-to_settle-text: #fda4af;
    --ui-status-to_review-bg: #713f12;
    --ui-status-to_review-text: #fde047;
    --ui-status-to_fix-bg: #7f1d1d;
    --ui-status-to_fix-text: #fca5a5;
    --ui-status-accepted-bg: #134e4a;
    --ui-status-accepted-text: #5eead4;
    --ui-status-done-bg: #14532d;
    --ui-status-done-text: #86efac;
    --ui-status-cancelled-bg: #1f2937;
    --ui-status-cancelled-text: #9ca3af;

    --ui-shadow-xs: 0 0 0 1px rgb(255 255 255 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --ui-shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 2px 6px -2px rgb(0 0 0 / 0.45);
    --ui-shadow-md: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 4px -1px rgb(0 0 0 / 0.45), 0 8px 16px -4px rgb(0 0 0 / 0.55);
    --ui-shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.07), 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 16px 32px -8px rgb(0 0 0 / 0.6);
    --ui-shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 16px -4px rgb(0 0 0 / 0.55), 0 32px 64px -16px rgb(0 0 0 / 0.7);
    --ui-shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 0.08);
    --ui-shadow-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.08);
}

/* ── 3. Skale nie-kolorowe (niezależne od motywu) ─────────────────────────── */

:root {
    /* Typografia */
    --ui-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

    --ui-font-size-2xs: 0.6875rem;  /* 11px — overline, liczniki */
    --ui-font-size-xs: 0.75rem;     /* 12px — metadane, odznaki */
    --ui-font-size-sm: 0.8125rem;   /* 13px — nawigacja, tabele, pola */
    --ui-font-size-base: 0.875rem;  /* 14px — kontrolki, treść gęsta */
    --ui-font-size-md: 0.9375rem;   /* 15px — treść panelu (body) */
    --ui-font-size-lg: 1.0625rem;   /* 17px — tytuły kart i szuflad */
    --ui-font-size-xl: 1.25rem;     /* 20px — nagłówki sekcji */
    --ui-font-size-2xl: 1.5rem;     /* 24px — tytuł strony */
    --ui-font-size-3xl: 1.875rem;   /* 30px — liczby KPI, hero */

    --ui-font-weight-normal: 400;
    --ui-font-weight-medium: 500;
    --ui-font-weight-semibold: 600;
    --ui-font-weight-bold: 700;
    --ui-font-weight-extrabold: 800;

    --ui-line-height-tight: 1.25;
    --ui-line-height-snug: 1.4;
    --ui-line-height-normal: 1.55;
    --ui-line-height-relaxed: 1.65;

    --ui-letter-spacing-tight: -0.015em;
    --ui-letter-spacing-wide: 0.06em;

    /* Role tekstu (1.8.0, fala 7) — JEDNA skala: każda rola wskazuje stopień `--ui-font-size-*`, żadnych
       rozmiarów spoza skali (28 i 22 px z apki mobilnej zeszły na 24 i 20). Wagi mają role, nie smak:
         400 regular   treść, opisy, metadane
         500 medium    tekst interfejsu: etykiety, nawigacja, chip, zakładka, odznaka
         600 semibold  tytuły (karta, sekcja, strona, ekran, arkusz) i akcje (przycisk)
         700 bold      WYŁĄCZNIE liczby: kafel KPI, kwota, kod z e-maila
         800 extrabold usunięte */
    --ui-type-h1-size: var(--ui-font-size-2xl);      /* 24px · 600 — tytuł ekranu i strony, hero */
    --ui-type-h2-size: var(--ui-font-size-xl);       /* 20px · 600 — tytuł arkusza i sekcji */
    --ui-type-h3-size: var(--ui-font-size-lg);       /* 17px · 600 — tytuł karty, szuflady, modala */
    --ui-type-body-size: var(--ui-font-size-md);     /* 15px · 400/600 — treść */
    --ui-type-small-size: var(--ui-font-size-sm);    /* 13px · 400 — metadane, podpisy */
    --ui-type-tiny-size: var(--ui-font-size-2xs);    /* 11px · 500 — liczniki, etykiety paska zakładek */

    /* Ikony (1.8.0) — trzy rozmiary robocze na siatce 4 px; xs tylko w odznace i metadanych,
       xl tylko jako ilustracja (pusty stan, ikona modala) */
    --ui-icon-xs: 0.75rem;   /* 12px — odznaka, metadane 12 px */
    --ui-icon-sm: 1rem;      /* 16px — kontrolki i wiersze: przycisk, pole, chip, menu, props */
    --ui-icon-md: 1.25rem;   /* 20px — domyślny .ui-icon, zamknij, strzałka wiersza, akcja w karcie */
    --ui-icon-lg: 1.5rem;    /* 24px — pasek zakładek, kafel, skrót, FAB, wstecz w nagłówku ekranu */
    --ui-icon-xl: 2rem;      /* 32px — ilustracja */

    /* Odstępy — siatka 4 px */
    --ui-space-0-5: 0.125rem;
    --ui-space-1: 0.25rem;
    --ui-space-1-5: 0.375rem;
    --ui-space-2: 0.5rem;
    --ui-space-2-5: 0.625rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-space-8: 2rem;
    --ui-space-10: 2.5rem;
    --ui-space-12: 3rem;
    --ui-space-16: 4rem;

    /* Promienie (nazwy jak w Tailwindzie — panel i portal używają tych samych) */
    /* Skala kształtów (1.6.0, fala 5): cztery stopnie + pigułka. Promień rośnie z rozmiarem
       i zagnieżdżeniem — element w środku ma promień zewnętrzny minus padding.
         sm   4 px  elementy poniżej 20 px: checkbox, kbd, linia szkieletu, segment w przełączniku
         lg   8 px  KONTROLKI: przycisk, pole, select, chip, zakładka, przełącznik segmentowy, pozycja menu
         xl  12 px  KONTENERY: karta, kafel, tabela, komunikat, popover, toast, pusty stan
         2xl 16 px  NAKŁADKI: modal, szuflada, arkusz, nagłówek ekranu, FAB
         full       WYŁĄCZNIE etykiety: odznaka, status, licznik, kropka, awatar, przełącznik, pasek postępu
       `md` i `3xl` to aliasy @deprecated — zostawione, żeby panel (`--legacy-radius-md`) nie pękł
       przed migracją; w nowym kodzie ich nie używaj. */
    --ui-radius-sm: 0.25rem;
    --ui-radius-lg: 0.5rem;
    --ui-radius-xl: 0.75rem;
    --ui-radius-2xl: 1rem;
    --ui-radius-full: 9999px;
    --ui-radius-md: var(--ui-radius-lg);   /* @deprecated 1.6.0 → lg */
    --ui-radius-3xl: var(--ui-radius-2xl); /* @deprecated 1.6.0 → 2xl */

    /* Stany (1.7.0, fala 6) — jedna gramatyka: każdy komponent odpowiada na ten sam stan tym samym
       znakiem, a znak ma JEDEN token. Komponent nie wymyśla własnej wartości.
         hover     tło --ui-hover-bg, bez transformacji (wyjątek: kontener interaktywny — karta, kafel,
                   kafel KPI jako link — unosi się 1 px i dostaje --ui-shadow-md)
         selected  --ui-selected-bg + --ui-selected-text na każdym „wybranym” z tekstem (zakładka, chip,
                   opcja, wiersz, segment --primary); pełny akcent tylko checkbox/radio/switch
         focus     --ui-focus-shadow (pierścień 3 px na zewnątrz); --ui-focus-shadow-inset tam, gdzie
                   kontener przycina (wiersz listy, akordeon, pasek zakładek telefonu); na powierzchni
                   marki pierścień z --ui-on-primary-border
         press     scale(--ui-press-scale) na kontrolce, opacity --ui-press-opacity na kontenerze (dotyk)
         disabled  opacity --ui-disabled-opacity + cursor: not-allowed */
    --ui-hover-bg: var(--ui-fill-hover);
    --ui-selected-bg: var(--ui-primary-soft);
    --ui-selected-text: var(--ui-primary-text);
    --ui-focus-shadow: 0 0 0 3px var(--ui-focus-ring);
    --ui-focus-shadow-inset: inset 0 0 0 3px var(--ui-focus-ring);
    --ui-press-scale: 0.97;
    --ui-press-opacity: 0.7;
    --ui-disabled-opacity: 0.5;

    /* Wysokości kontrolek */
    --ui-control-sm: 1.875rem;  /* 30px */
    --ui-control-md: 2.25rem;   /* 36px */
    --ui-control-lg: 2.75rem;   /* 44px — cel dotyku */
    --ui-touch-target: var(--ui-control-lg); /* najmniejszy cel dotyku (iOS/Android: 44 px) — alias dla czytelności */

    /* Ekran mobilny (apka natywna, portal na telefonie, apka v2 w WebView) */
    --ui-tabbar-height: 3.5rem;          /* 56px — dolny pasek zakładek (bez safe-area) */
    --ui-fab-size: 3.5rem;               /* 56px — pływający przycisk akcji */
    --ui-screen-header-radius: var(--ui-radius-2xl);  /* @deprecated 1.6.0 — nakładki mają 2xl (16 px) */
    --ui-sheet-radius: var(--ui-radius-2xl);          /* @deprecated 1.6.0 — nakładki mają 2xl (16 px) */
    --ui-icon-tile: 2.375rem;            /* 38px — kafelek ikony w wierszu nawigacyjnym, KPI, powiadomieniu */
    --ui-safe-top: env(safe-area-inset-top, 0px);
    --ui-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Ruch */
    --ui-duration-fast: 120ms;
    --ui-duration: 200ms;
    --ui-duration-slow: 350ms;
    --ui-duration-state: 160ms;     /* zmiana stanu kontrolki: checkbox, chip, pole, przycisk */
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* wejścia, zmiany stanu — szybki start, miękki koniec */
    --ui-ease-in: cubic-bezier(0.4, 0, 1, 1);          /* wyjścia — znika szybko */
    --ui-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); /* zaznaczenie, przełącznik, wskaźnik — lekkie przestrzelenie */
    --ui-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Warstwy */
    --ui-z-sticky: 20;
    --ui-z-dropdown: 40;
    --ui-z-drawer: 50;
    --ui-z-modal: 60;
    --ui-z-toast: 70;
    --ui-z-tooltip: 80;

    /* Układ */
    --ui-sidebar-width: 260px;
    --ui-content-max: 80rem;
    --ui-drawer-sm: 26rem;
    --ui-drawer-md: 36rem;
    --ui-drawer-lg: 52rem;
    --ui-phone-width: 24.375rem;  /* 390px — szerokość odniesienia ekranu telefonu (iPhone 15/16) */
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-duration-fast: 0ms;
        --ui-duration-state: 0ms;
        --ui-duration: 0ms;
        --ui-duration-slow: 0ms;
    }
}