/*
 * Токени дизайн-коду Kosandis (RGT-421, ADR-70): гібридна система M3 + Linear (RGT-205) у палітрі бренду.
 * Канон — --sl-*. Старі імена (--md-*, --st-*, --sp-*, --rgt-*) — аліаси;
 * нові правила пишуться лише на --sl-*. Hex-кольори дозволені лише в цьому файлі.
 * Файл містить лише custom properties і color-scheme.
 * Перевірка контрасту пар: tools/ui/contrast.py (WCAG 2.x, поріг 4.5:1).
 * Джерело значень — брендбук kosandis-brand-kb (05-visual-identity, 13-design-system, 14-marketing-site).
 */
:root {
  /* ---------- 1.0 Бренд ---------- */
  --sl-brand-kos: #2F7FA8;        /* Кос: рамка фокусу, акцентні лінії, вертикалі знака */
  --sl-brand-seaglass: #7FC8D6;   /* Морське скло: підсвітки, кнопки в темній темі */
  --sl-logo-h: #14315C;           /* горизонталі знака (на світлому — Егейський) */
  --sl-logo-v: #2F7FA8;           /* вертикалі знака (на світлому — Кос) */
  /* м'які плями тла (вхід, порожні стани) і стрічки плетіння — 14-marketing-site */
  --sl-tint-sky: #DCE8F0;
  --sl-tint-sand: #F1E3CD;
  --sl-tint-glass: #E4F3F5;
  --sl-tint-cream: #F7F2E8;
  --sl-tint-blue: #E6EEF4;
  --sl-rib-sky: #9DBEDF;          /* склад */
  --sl-rib-sand: #D4C09C;         /* ЛІС */
  --sl-rib-glass: #8FCAD9;        /* аналізатори */
  /* ілюстрації (упаковка з QR, телефон-пульт): одне джерело світла, пастель */
  --sl-ill-front-top: #FFFDF8;
  --sl-ill-front-bot: #EEE6D6;
  --sl-ill-side: #E4DAC6;
  --sl-ill-top: #F5EFE3;
  --sl-ill-stroke: #D8CFBE;
  --sl-ill-print: #D9D2C3;
  --sl-ill-shadow: #9C8F76;
  --sl-ill-screen: #F8F6F1;

  /* ---------- 1.1 Колір · ролі (світла тема) ---------- */
  --sl-primary: #14315C;          /* Егейський */
  --sl-on-primary: #FFFFFF;
  --sl-primary-hover: #183A6C;
  --sl-primary-container: #D6E4F5;
  --sl-on-primary-container: #0B2447;

  --sl-secondary: #5B6575;        /* Сланець */
  --sl-on-secondary: #FFFFFF;
  --sl-secondary-container: #DCE6F2;
  --sl-on-secondary-container: #0E1A2B;

  --sl-tertiary: #565D7E;
  --sl-on-tertiary: #FFFFFF;
  --sl-tertiary-container: #DDE1FF;
  --sl-on-tertiary-container: #131A37;

  --sl-error: #BA1A1A;
  --sl-on-error: #FFFFFF;
  --sl-error-container: #FFDAD6;
  --sl-on-error-container: #410002;

  --sl-surface: #F4F1EA;            /* тло сторінки — Вапняк */
  --sl-surface-dim: #D1CCC0;
  --sl-surface-bright: #F4F1EA;
  --sl-surface-container-lowest: #FFFFFF;   /* картки, хедер, таблиці */
  --sl-surface-container-low: #F8F6F1;      /* плитки в картках, бічні панелі */
  --sl-surface-container: #EEEBE3;          /* плитки на сторінці */
  --sl-surface-container-high: #E2DED4;     /* заповнені поля, розділювачі */
  --sl-surface-container-highest: #DCD8CD;
  --sl-on-surface: #0E1A2B;                 /* Чорнило */
  --sl-on-surface-variant: #525C6B;         /* Сланець, затемнений до 4.5:1 на заповненому полі */

  --sl-outline: #6F7785;            /* межі інтерактивних елементів (≥ 3:1 і на заповненому полі) */
  --sl-outline-variant: #D3CEC2;    /* декоративні межі, вимкнені межі — «сильна лінія» сайту */

  --sl-inverse-surface: #1F2D47;    /* снекбар */
  --sl-inverse-on-surface: #F4F1EA;
  --sl-inverse-primary: #7FC8D6;
  --sl-scrim: #000000;

  /* службові похідні */
  --sl-divider: #E2DED4;            /* межі карток і рядків таблиць (декоративні) — «лінія» сайту */
  --sl-selected: #E3ECF6;           /* вибраний рядок / вузол */
  --sl-inset: var(--sl-surface-container-low);   /* вкладена плитка в картці/діалозі: пошук, readonly-поле, перелік (B4–B6) */
  --sl-group-row: #F6F4EE;          /* заголовок групи в таблиці */
  --sl-card: var(--sl-surface-container-lowest);   /* фон картки (у темній — container-low) */
  --sl-focus-ring: var(--sl-brand-kos);
  --sl-auth-tile: var(--sl-card);       /* плитка знака на екрані входу (у темній — підняття тоном) */

  /* ---------- 1.1 Колір · 7 доменних статусів (не змінювати: 05-visual-identity) ----------
     bg — фон чипа, fg — текст, ic — іконка. Статус завжди = колір + іконка + текст. */
  --sl-st-ok-bg: #E3F0E8;          --sl-st-ok-fg: #1F4A36;          --sl-st-ok-ic: #3B7D5C;
  --sl-st-warn-bg: #F5EDDA;        --sl-st-warn-fg: #5A4005;        --sl-st-warn-ic: #8A6100;
  --sl-st-expired-bg: #F8E5E2;     --sl-st-expired-fg: #6B1F1D;     --sl-st-expired-ic: #B3413E;
  --sl-st-quarantine-bg: #E8E9F4;  --sl-st-quarantine-fg: #2F3462;  --sl-st-quarantine-ic: #5C6396;
  --sl-st-recalled-bg: #F3E6F0;    --sl-st-recalled-fg: #5B2150;    --sl-st-recalled-ic: #94477F;
  --sl-st-transit-bg: #E1EEF4;     --sl-st-transit-fg: #163F52;     --sl-st-transit-ic: #2F7391;
  --sl-st-finished-bg: #E9EFF1;    --sl-st-finished-fg: #3F484B;    --sl-st-finished-ic: #6F797B;

  /* похідні кольори */
  --sl-skeleton: var(--sl-surface-container-high);
  --sl-tooltip-bg: var(--sl-inverse-surface);
  --sl-tooltip-fg: var(--sl-inverse-on-surface);

  color-scheme: light;

  /* ---------- 1.2 Типографіка (rem) ----------
     Onest — інтерфейс; Geologica 600 — заголовки від 22 px і слово в логотипі; JetBrains Mono — лише коди й лоти. */
  --sl-font: "Onest", system-ui, sans-serif;
  --sl-font-display: "Geologica", "Onest", system-ui, sans-serif;
  --sl-font-mono: "JetBrains Mono", ui-monospace, monospace;   /* лише коди одиниць */
  --sl-code-tracking: 1px;                                   /* розрядка коду, як у мокапах */
  --sl-display-tracking: -.02em;                             /* щільні заголовки Geologica */

  --sl-display-l: 600 3.5625rem/4rem var(--sl-font-display);
  --sl-display-m: 600 2.8125rem/3.25rem var(--sl-font-display);
  --sl-display-s: 600 2.25rem/2.75rem var(--sl-font-display);
  --sl-headline-l: 600 2rem/2.5rem var(--sl-font-display);
  --sl-headline-m: 600 1.75rem/2.25rem var(--sl-font-display);
  --sl-headline-s: 600 1.5rem/2rem var(--sl-font-display);
  --sl-title-l: 600 1.375rem/1.75rem var(--sl-font-display);
  --sl-title-m: 600 1rem/1.5rem var(--sl-font);
  --sl-title-s: 600 .875rem/1.25rem var(--sl-font);
  --sl-body-l: 400 1rem/1.5rem var(--sl-font);
  --sl-body-m: 400 .875rem/1.25rem var(--sl-font);
  --sl-body-s: 400 .75rem/1rem var(--sl-font);
  --sl-label-l: 600 .875rem/1.25rem var(--sl-font);
  --sl-label-m: 500 .75rem/1rem var(--sl-font);
  --sl-label-s: 500 .6875rem/1rem var(--sl-font);

  /* робочі розміри — перемикаються набором (ПК / щільний / пульт) */
  --sl-text-body: .875rem;
  --sl-text-label: .75rem;
  --sl-text-button: .875rem;
  --sl-text-table: .875rem;
  --sl-lh-body: 1.25rem;
  --sl-lh-label: 1rem;
  --sl-lh-button: 1.25rem;
  --sl-lh-table: 1.25rem;

  /* ---------- 1.3 Відступи ---------- */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 20px;
  --sl-space-6: 24px;
  --sl-space-8: 32px;
  --sl-space-12: 48px;

  /* ---------- 1.3 Радіуси (лише ці значення) ---------- */
  --sl-radius-none: 0;      /* розділювачі, на всю ширину */
  --sl-radius-xs: 4px;      /* чекбокс, kbd, мітка на етикетці */
  --sl-radius-sm: 8px;      /* іконка типу вузла, мітки одиниці, підказки */
  --sl-radius-control: 10px; /* Kosandis: кнопки, сегменти, пошук, поле скану, верхня панель, пункт навігації */
  --sl-radius-md: 12px;     /* поля вводу, меню, снекбар, плитки всередині карток, вузол дерева */
  --sl-radius-lg: 16px;     /* картки, панелі, контейнер таблиці, плитки на сторінці, банер */
  --sl-radius-xl: 20px;     /* Kosandis: діалог, нижній аркуш, вікно камери пульта (у Salo було 28) */
  --sl-radius-full: 9999px; /* лише круглі елементи й малі чипи: статуси, етапи, фільтри, бейджі, перемикач */

  /* ---------- 1.3 Підняття ----------
     Тон поверхні + м'яка багатошарова тінь із синім відтінком (сайт kosandis.com): картки «висять» над тлом. */
  --sl-shadow-card: 0 1px 2px rgba(14,26,43,.05), 0 12px 32px -12px rgba(20,49,92,.18);
  --sl-shadow-bar: 0 1px 0 rgba(226,222,212,.7), 0 8px 24px -16px rgba(20,49,92,.25);
  --sl-shadow-btn: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -8px rgba(20,49,92,.55);
  --sl-shadow-btn-hover: 0 1px 0 rgba(255,255,255,.2) inset, 0 14px 28px -10px rgba(20,49,92,.55);
  --sl-shadow-2: 0 1px 2px rgba(14,26,43,.08), 0 8px 24px -8px rgba(20,49,92,.28);
  --sl-shadow-3: 0 2px 4px rgba(14,26,43,.10), 0 24px 48px -16px rgba(20,49,92,.35);
  --sl-scrim-opacity: 32%;

  /* ---------- 1.4 Стани й рух (стани — у відсотках) ---------- */
  --sl-state-hover: 8%;
  --sl-state-focus: 10%;
  --sl-state-pressed: 10%;
  --sl-state-drag: 16%;
  --sl-disabled-container: 12%;   /* фон вимкненого елемента = on-surface × 12 % */
  --sl-disabled-content: 38%;     /* текст вимкненого елемента = on-surface × 38 % */
  --sl-focus-width: 2px;
  --sl-focus-offset: 2px;
  --sl-duration-short: 100ms;
  --sl-duration-medium: 200ms;
  --sl-duration-brand: 1100ms;    /* лише заставка: плетіння знака на вході й на екрані успіху пульта (≤ 1,2 с) */
  --sl-easing: cubic-bezier(.2, 0, 0, 1);
  --sl-easing-brand: cubic-bezier(.22, .8, .24, 1);   /* крива сайту — лише для брендових моментів */
  --sl-indicator-delay: 150ms;    /* не рух: reduced-motion її не обнуляє */

  /* ---------- 1.5 Розміри (ПК, комфортний — дефолт) ---------- */
  --sl-control-h: 48px;     /* кнопка, поле, сегмент */
  --sl-control-h-sm: 40px;  /* кнопка в шапці картки, в тулбарі */
  --sl-chip-h: 32px;
  --sl-status-h: 28px;
  --sl-row-h: 56px;         /* рядок таблиці: 2 рядки тексту */
  --sl-group-h: 40px;       /* заголовок групи таблиці */
  --sl-tree-row-h: 48px;
  --sl-icon: 20px;
  --sl-header-h: 56px;      /* верхня панель ПК */
  --sl-subnav-h: 44px;      /* смужка підрозділів */
  --sl-content-max: 1440px;
  --sl-page-pad: 24px;

  /* ---------- Розміри з гайду — константи, не залежать від щільності ---------- */
  --sl-size-tree-indent: 24px;      /* відступ рівня дерева */
  --sl-size-tree-guide: 2px;        /* напрямна дерева */
  --sl-size-tree-col: 128px;        /* ширина колонки дерева */
  --sl-size-tree-col-num: 72px;     /* числова колонка дерева */
  --sl-size-menu-min: 240px;        /* мінімальна ширина меню */
  --sl-size-selected-bar: 3px;      /* смуга вибраного, риска підрозділу */
  --sl-size-node-icon: 24px;        /* іконка типу вузла */
  --sl-size-dialog: 560px;          /* діалог (і ширина снекбара) */
  --sl-size-drawer: 360px;          /* модальна шухляда навігації (M3, ADR-30) */
  --sl-size-dialog-wide: 720px;     /* широкий діалог-форма (B3) */
  --sl-size-dialog-narrow: 480px;   /* вузький діалог (B6, B8) */
  --sl-size-auth-card: 440px;       /* картка входу */
  --sl-size-header-inset: 12px;     /* відступ верхньої панелі від країв */
  --sl-size-pult-row: 72px;         /* рядок-картка пульта */
  --sl-size-pult-max: 600px;        /* ширина пульта */
  --sl-size-table-min: 900px;       /* мін. ширина таблиці */
  --sl-size-target-touch: 56px;     /* ціль на пульті */
  --sl-size-scan-touch: 64px;       /* поле скану на пульті */
  --sl-size-chip-close: 24px;       /* кнопка закриття вхідного чипа */
  --sl-size-empty-icon: 48px;       /* іконка порожнього стану */
  --sl-size-empty-art: 136px;       /* ілюстрація порожнього стану (упаковка з QR, телефон-пульт) */
  --sl-size-spinner: 18px;          /* індикатор у кнопці */
  --sl-header-item-h: 40px;         /* пункт розділу, іконкова кнопка й поле скану у верхній панелі */
  --sl-header-item-pad: 12px;       /* бічний відступ пункту розділу й поля скану в панелі (14 → 12: місце локапу, RGT-421) */
  --sl-header-scan-w: 300px;        /* поле скану у верхній панелі */
  --sl-size-brand-mark: 32px;       /* знак організації (ініціали) */
  --sl-size-logo-mark: 28px;        /* знак Kosandis у верхній панелі; слово — Geologica 600 */
  --sl-size-logo-mark-auth: 56px;   /* знак на екрані входу й на екрані успіху пульта */
  --sl-size-weave: 320px;           /* плетіння стрічок на екрані входу */
  --sl-size-weave-h: 120px;
  --sl-pult-header-h: 64px;         /* шапка пульта */
  --sl-nav-indicator-w: 56px;       /* пігулка активного пункту нижньої навігації */
  --sl-nav-indicator-h: 32px;
  --sl-size-fab-ring: 4px;          /* кільце кнопки «Сканувати» */
  --sl-size-fab-lift: 28px;         /* підйом кнопки «Сканувати» над панеллю */

  /* ---------- z-index — шкала ---------- */
  --sl-z-raised: 1;
  --sl-z-header: 30;
  --sl-z-menu: 40;
  --sl-z-tooltip: 50;
  --sl-z-snackbar: 60;

  /* ---------- Аліаси M3-ролей (однойменні) ---------- */
  --md-primary: var(--sl-primary);
  --md-on-primary: var(--sl-on-primary);
  --md-primary-container: var(--sl-primary-container);
  --md-on-primary-container: var(--sl-on-primary-container);
  --md-secondary: var(--sl-secondary);
  --md-on-secondary: var(--sl-on-secondary);
  --md-secondary-container: var(--sl-secondary-container);
  --md-on-secondary-container: var(--sl-on-secondary-container);
  --md-tertiary: var(--sl-tertiary);
  --md-on-tertiary: var(--sl-on-tertiary);
  --md-tertiary-container: var(--sl-tertiary-container);
  --md-on-tertiary-container: var(--sl-on-tertiary-container);
  --md-error: var(--sl-error);
  --md-on-error: var(--sl-on-error);
  --md-error-container: var(--sl-error-container);
  --md-on-error-container: var(--sl-on-error-container);
  --md-surface: var(--sl-surface);
  --md-on-surface: var(--sl-on-surface);
  --md-on-surface-variant: var(--sl-on-surface-variant);
  --md-outline: var(--sl-outline);
  --md-outline-variant: var(--sl-outline-variant);
  --md-surface-dim: var(--sl-surface-dim);
  --md-surface-bright: var(--sl-surface-bright);
  --md-surface-container-lowest: var(--sl-surface-container-lowest);
  --md-surface-container-low: var(--sl-surface-container-low);
  --md-surface-container: var(--sl-surface-container);
  --md-surface-container-high: var(--sl-surface-container-high);
  --md-surface-container-highest: var(--sl-surface-container-highest);
  --md-inverse-surface: var(--sl-inverse-surface);
  --md-inverse-on-surface: var(--sl-inverse-on-surface);
  --md-inverse-primary: var(--sl-inverse-primary);
  --md-scrim: var(--sl-scrim);

  /* ---------- Старі імена без однойменного --sl- ---------- */
  --md-warning: var(--sl-st-warn-ic);
  --md-on-warning: var(--sl-st-warn-bg);
  --md-warning-container: var(--sl-st-warn-bg);
  --md-on-warning-container: var(--sl-st-warn-fg);
  --md-surface-variant: var(--sl-surface-container-highest);

  /* ---------- Аліаси статусів ---------- */
  --st-ok: var(--sl-st-ok-bg);                 --st-on-ok: var(--sl-st-ok-fg);
  --st-warn: var(--sl-st-warn-bg);             --st-on-warn: var(--sl-st-warn-fg);
  --st-expired: var(--sl-st-expired-bg);       --st-on-expired: var(--sl-st-expired-fg);
  --st-quarantine: var(--sl-st-quarantine-bg); --st-on-quarantine: var(--sl-st-quarantine-fg);
  --st-recalled: var(--sl-st-recalled-bg);     --st-on-recalled: var(--sl-st-recalled-fg);
  --st-transit: var(--sl-st-transit-bg);       --st-on-transit: var(--sl-st-transit-fg);
  --st-finished: var(--sl-st-finished-bg);     --st-on-finished: var(--sl-st-finished-fg);

  /* ---------- Аліаси форми, відступів, руху, станів, каркаса ---------- */
  --md-shape-none: var(--sl-radius-none);
  --md-shape-xs: var(--sl-radius-xs);
  --md-shape-s: var(--sl-radius-sm);
  --md-shape-m: var(--sl-radius-md);
  --md-shape-l: var(--sl-radius-lg);
  --md-shape-xl: var(--sl-radius-xl);
  --md-shape-full: var(--sl-radius-full);

  --sp-1: var(--sl-space-1);
  --sp-2: var(--sl-space-2);
  --sp-3: var(--sl-space-3);
  --sp-4: var(--sl-space-4);
  --sp-5: var(--sl-space-5);
  --sp-6: var(--sl-space-6);
  --sp-7: var(--sl-space-8);
  --sp-8: var(--sl-space-12);

  --md-elev-2: var(--sl-shadow-2);
  --md-elev-3: var(--sl-shadow-3);

  --md-dur-short: var(--sl-duration-short);
  --md-dur-medium: var(--sl-duration-medium);
  --md-ease-standard: var(--sl-easing);

  --md-state-hover: var(--sl-state-hover);
  --md-state-focus: var(--sl-state-focus);
  --md-state-pressed: var(--sl-state-pressed);
  --md-state-dragged: var(--sl-state-drag);
  --md-focus-ring: var(--sl-focus-width);
  --md-focus-offset: var(--sl-focus-offset);

  --rgt-page-max: var(--sl-content-max);
  --rgt-pult-max: var(--sl-size-pult-max);
  --rgt-target-touch: var(--sl-size-target-touch);
  --rgt-field-h-touch: var(--sl-size-scan-touch);
  --rgt-overlay-max: var(--sl-size-dialog);
  --rgt-table-min: var(--sl-size-table-min);
  --rgt-indicator-delay: var(--sl-indicator-delay);

  /* ---------- deprecated, RGT-205: прибрати, коли в app.css не лишиться вжитків ---------- */
  --md-font: "Onest", system-ui, sans-serif;

  --md-type-display: 2.25rem;
  --md-type-headline: 1.75rem;
  --md-type-title: 1.375rem;
  --md-type-touch-body: 1rem;
  --md-type-touch-label: .875rem;
  --md-type-touch-button: 1.125rem;
  --md-type-dense-body: .875rem;
  --md-type-dense-label: .75rem;
  --md-type-dense-table: .875rem;
  --md-type-dense-table-compact: .8125rem;

  --md-elev-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);

  --rgt-field-h: 56px;
}
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sl-logo-h: #F4F1EA;
    --sl-logo-v: #7FC8D6;
    --sl-tint-sky: #16243C;
    --sl-tint-sand: #1E2535;
    --sl-tint-glass: #112A35;
    --sl-tint-cream: #141F33;
    --sl-tint-blue: #122036;
    --sl-rib-sky: #3E5F85;
    --sl-rib-sand: #7C6F52;
    --sl-rib-glass: #3C7E8E;
    --sl-ill-front-top: #243653;
    --sl-ill-front-bot: #1A2740;
    --sl-ill-side: #142037;
    --sl-ill-top: #2A3D5C;
    --sl-ill-stroke: #35496B;
    --sl-ill-print: #4A5C7A;
    --sl-ill-shadow: #000000;
    --sl-ill-screen: #121D30;

    --sl-primary: #7FC8D6;
    --sl-on-primary: #0A2140;
    --sl-primary-hover: #98D4DF;
    --sl-primary-container: #0F2747;
    --sl-on-primary-container: #D6E4F5;

    --sl-secondary: #C6D0DE;
    --sl-on-secondary: #1B2E4D;
    --sl-secondary-container: #2E4566;
    --sl-on-secondary-container: #DCE6F2;

    --sl-tertiary: #BEC5EB;
    --sl-on-tertiary: #282F4D;
    --sl-tertiary-container: #3E4565;
    --sl-on-tertiary-container: #DDE1FF;

    --sl-error: #FFB4AB;
    --sl-on-error: #690005;
    --sl-error-container: #93000A;
    --sl-on-error-container: #FFDAD6;

    --sl-surface: #0A1424;            /* глибокий синій, не чорний */
    --sl-surface-dim: #0A1424;
    --sl-surface-bright: #283856;
    --sl-surface-container-lowest: #070F1C;
    --sl-surface-container-low: #0E1A2B;
    --sl-surface-container: #121D30;
    --sl-surface-container-high: #1A2740;
    --sl-surface-container-highest: #24334F;
    --sl-on-surface: #DCD8CD;
    --sl-on-surface-variant: #C3BEB2;

    --sl-outline: #8A94A3;
    --sl-outline-variant: #3A4A66;

    --sl-inverse-surface: #DCD8CD;
    --sl-inverse-on-surface: #1F2D47;
    --sl-inverse-primary: #14315C;
    --sl-scrim: #000000;

    --sl-divider: #1A2740;
    --sl-selected: #1B2E4D;
    --sl-inset: var(--sl-surface-container-high);
    --sl-group-row: #0E1A2B;

    /* у темній темі картки — container-low, а не lowest (інакше «провалюються») */
    --sl-card: var(--sl-surface-container-low);
    --sl-focus-ring: var(--sl-primary);
    --sl-auth-tile: var(--sl-surface-container-high);

    --sl-st-ok-bg: #1E3328;          --sl-st-ok-fg: #CBEBD7;          --sl-st-ok-ic: #8FD1AB;
    --sl-st-warn-bg: #3A2E10;        --sl-st-warn-fg: #F5E1B5;        --sl-st-warn-ic: #E6C06A;
    --sl-st-expired-bg: #44201E;     --sl-st-expired-fg: #FFDAD5;     --sl-st-expired-ic: #FFB3AA;
    --sl-st-quarantine-bg: #2A2D45;  --sl-st-quarantine-fg: #DFE0F7;  --sl-st-quarantine-ic: #B8BCEB;
    --sl-st-recalled-bg: #3B2036;    --sl-st-recalled-fg: #F8D8EF;    --sl-st-recalled-ic: #E9A9D6;
    --sl-st-transit-bg: #173341;     --sl-st-transit-fg: #CDE8F4;     --sl-st-transit-ic: #8CC9E3;
    --sl-st-finished-bg: #252B2D;    --sl-st-finished-fg: #BFC8CB;    --sl-st-finished-ic: #899295;

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --sl-logo-h: #F4F1EA;
    --sl-logo-v: #7FC8D6;
    --sl-tint-sky: #16243C;
    --sl-tint-sand: #1E2535;
    --sl-tint-glass: #112A35;
    --sl-tint-cream: #141F33;
    --sl-tint-blue: #122036;
    --sl-rib-sky: #3E5F85;
    --sl-rib-sand: #7C6F52;
    --sl-rib-glass: #3C7E8E;
    --sl-ill-front-top: #243653;
    --sl-ill-front-bot: #1A2740;
    --sl-ill-side: #142037;
    --sl-ill-top: #2A3D5C;
    --sl-ill-stroke: #35496B;
    --sl-ill-print: #4A5C7A;
    --sl-ill-shadow: #000000;
    --sl-ill-screen: #121D30;

    --sl-primary: #7FC8D6;
    --sl-on-primary: #0A2140;
    --sl-primary-hover: #98D4DF;
    --sl-primary-container: #0F2747;
    --sl-on-primary-container: #D6E4F5;

    --sl-secondary: #C6D0DE;
    --sl-on-secondary: #1B2E4D;
    --sl-secondary-container: #2E4566;
    --sl-on-secondary-container: #DCE6F2;

    --sl-tertiary: #BEC5EB;
    --sl-on-tertiary: #282F4D;
    --sl-tertiary-container: #3E4565;
    --sl-on-tertiary-container: #DDE1FF;

    --sl-error: #FFB4AB;
    --sl-on-error: #690005;
    --sl-error-container: #93000A;
    --sl-on-error-container: #FFDAD6;

    --sl-surface: #0A1424;            /* глибокий синій, не чорний */
    --sl-surface-dim: #0A1424;
    --sl-surface-bright: #283856;
    --sl-surface-container-lowest: #070F1C;
    --sl-surface-container-low: #0E1A2B;
    --sl-surface-container: #121D30;
    --sl-surface-container-high: #1A2740;
    --sl-surface-container-highest: #24334F;
    --sl-on-surface: #DCD8CD;
    --sl-on-surface-variant: #C3BEB2;

    --sl-outline: #8A94A3;
    --sl-outline-variant: #3A4A66;

    --sl-inverse-surface: #DCD8CD;
    --sl-inverse-on-surface: #1F2D47;
    --sl-inverse-primary: #14315C;
    --sl-scrim: #000000;

    --sl-divider: #1A2740;
    --sl-selected: #1B2E4D;
    --sl-inset: var(--sl-surface-container-high);
    --sl-group-row: #0E1A2B;

    /* у темній темі картки — container-low, а не lowest (інакше «провалюються») */
    --sl-card: var(--sl-surface-container-low);
    --sl-focus-ring: var(--sl-primary);
    --sl-auth-tile: var(--sl-surface-container-high);

    --sl-st-ok-bg: #1E3328;          --sl-st-ok-fg: #CBEBD7;          --sl-st-ok-ic: #8FD1AB;
    --sl-st-warn-bg: #3A2E10;        --sl-st-warn-fg: #F5E1B5;        --sl-st-warn-ic: #E6C06A;
    --sl-st-expired-bg: #44201E;     --sl-st-expired-fg: #FFDAD5;     --sl-st-expired-ic: #FFB3AA;
    --sl-st-quarantine-bg: #2A2D45;  --sl-st-quarantine-fg: #DFE0F7;  --sl-st-quarantine-ic: #B8BCEB;
    --sl-st-recalled-bg: #3B2036;    --sl-st-recalled-fg: #F8D8EF;    --sl-st-recalled-ic: #E9A9D6;
    --sl-st-transit-bg: #173341;     --sl-st-transit-fg: #CDE8F4;     --sl-st-transit-ic: #8CC9E3;
    --sl-st-finished-bg: #252B2D;    --sl-st-finished-fg: #BFC8CB;    --sl-st-finished-ic: #899295;

    color-scheme: dark;
}
[data-density="comfortable"] {
  --sl-control-h: 48px;
  --sl-control-h-sm: 40px;
  --sl-chip-h: 32px;
  --sl-status-h: 28px;
  --sl-row-h: 56px;
  --sl-group-h: 40px;
  --sl-tree-row-h: 48px;
  --sl-icon: 20px;
  --sl-text-table: .875rem;
  --sl-lh-table: 1.25rem;
  --rgt-sub-display: block;
}
[data-density="compact"], [data-density="dense"] {
  --sl-control-h: 40px;
  --sl-control-h-sm: 32px;
  --sl-chip-h: 28px;
  --sl-status-h: 22px;
  --sl-row-h: 40px;
  --sl-group-h: 32px;
  --sl-tree-row-h: 40px;
  --sl-icon: 18px;
  --sl-text-table: .8125rem;
  --sl-lh-table: 1.125rem;
  --rgt-sub-display: none;
}
.rgt-touch, .rgt-touch [data-density] {
  --sl-text-body: 1rem;
  --sl-text-label: .875rem;
  --sl-text-button: 1.125rem;
  --sl-lh-body: 1.5rem;
  --sl-lh-label: 1.25rem;
  --sl-lh-button: 1.5rem;
  --sl-control-h: 56px;
  --sl-control-h-sm: 56px;
  --sl-chip-h: 40px;
  --sl-status-h: 32px;
  --sl-icon: 24px;
  --sl-page-pad: 16px;
  --sl-bottom-nav-h: 80px;
  --sl-scan-fab: 64px;
}
/* RGT-407: нижня панель телефона — і на сторінках ПК < 840 px (layouts/desk.html), тож її розміри — глобальні */
:root {
  --sl-bottom-nav-h: 80px;
  --sl-scan-fab: 64px;
}
:root, [data-density], .rgt-touch {
  --rgt-fs-body: var(--sl-text-body);
  --rgt-fs-label: var(--sl-text-label);
  --rgt-fs-button: var(--sl-text-button);
  --rgt-fs-table: var(--sl-text-table);
  --rgt-target: var(--sl-control-h);
  --rgt-row-h: var(--sl-row-h);
  --rgt-chip-h: var(--sl-status-h);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --sl-duration-short: 0ms;
    --sl-duration-medium: 0ms;
  }
}