/*
 * Токени дизайн-коду Kosandis: гібридна система 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).
 */
:root {
  --sl-font-display: "Geologica", "Onest", sans-serif;
  --sl-brand-kos: #2F7FA8;   /* межі фокусу й акцентні лінії */
  --sl-brand-seaglass: #7FC8D6;

  /* ---------- 1.1 Колір · ролі (світла тема) ---------- */
  --sl-primary: #14315C;
  --sl-on-primary: #FFFFFF;
  --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: #5B6575;

  --sl-outline: #858C98;            /* межі інтерактивних елементів (≥ 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-primary);

  /* ---------- 1.1 Колір · 7 доменних статусів ----------
     bg — фон чипа (тон ≈ 93–94, низька насиченість, відтінок підтягнутий до primary)
     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: #EEEBE3;    --sl-st-finished-fg: #5B6575;    --sl-st-finished-ic: #858C98;

  /* похідні кольори */
  --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) ---------- */
  --sl-font: "Onest", system-ui, sans-serif;
  --sl-font-mono: "JetBrains Mono", ui-monospace, monospace;   /* лише коди одиниць */
  --sl-code-tracking: 1px;                                   /* розрядка коду, як у мокапах */

  --sl-display-l: 500 3.5625rem/4rem var(--sl-font);
  --sl-display-m: 500 2.8125rem/3.25rem var(--sl-font);
  --sl-display-s: 500 2.25rem/2.75rem var(--sl-font);
  --sl-headline-l: 500 2rem/2.5rem var(--sl-font);
  --sl-headline-m: 500 1.75rem/2.25rem var(--sl-font);
  --sl-headline-s: 500 1.5rem/2rem var(--sl-font);
  --sl-title-l: 500 1.375rem/1.75rem var(--sl-font);
  --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-md: 12px;     /* поля вводу, меню, снекбар, плитки всередині карток, вузол дерева */
  --sl-radius-lg: 16px;     /* картки, панелі, контейнер таблиці, плитки на сторінці, банер */
  --sl-radius-control: 10px; /* Kosandis: кнопки, сегменти, пошук, поле скану, верхня панель, пункт навігації */
  --sl-radius-xl: 20px;     /* Kosandis: діалог, нижній аркуш, вікно камери пульта (у Salo було 28) */
  --sl-radius-full: 9999px; /* лише круглі елементи й малі чипи до 32 px: статуси, етапи, фільтри, бейджі, перемикач */

  /* ---------- 1.3 Підняття ----------
     За замовчуванням — тоном поверхні (див. ролі surface-container-*).
     Тіні лише для меню (рівень 2) і діалогу (рівень 3). */
  --sl-shadow-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --sl-shadow-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --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-easing: cubic-bezier(.2, 0, 0, 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-spinner: 18px;          /* індикатор у кнопці */
  --sl-header-item-h: 40px;         /* пункт розділу, іконкова кнопка й поле скану у верхній панелі */
  --sl-header-item-pad: 14px;       /* бічний відступ пункту розділу й поля скану в панелі */
  --sl-header-scan-w: 300px;        /* поле скану у верхній панелі */
  --sl-size-brand-mark: 32px;       /* знак продукту */
  --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-primary: #7FC8D6;
    --sl-on-primary: #0A2140;
    --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: #D3CEC2;

    --sl-outline: #8A94A3;
    --sl-outline-variant: #5B6575;

    --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-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: #1A2740;    --sl-st-finished-fg: #D3CEC2;    --sl-st-finished-ic: #8A94A3;

    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --sl-primary: #7FC8D6;
    --sl-on-primary: #0A2140;
    --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: #D3CEC2;

    --sl-outline: #8A94A3;
    --sl-outline-variant: #5B6575;

    --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-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: #1A2740;    --sl-st-finished-fg: #D3CEC2;    --sl-st-finished-ic: #8A94A3;

    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;
}
: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;
  }
}

/* ---------- Маркетинговий сайт kosandis.com (landing.css, site.js) ----------
   Світла тепла палітра лендінгу; від теми застосунку не залежить (сайт лише світлий).
   Бренд — сині й теплі нейтральні; пастелі статусів — лише в ілюстраціях продукту. */
:root {
  --lp-ink: #0E1A2B;
  --lp-slate: #5B6575;
  --lp-aegean: #14315C;
  --lp-aegean-deep: #183A6C;      /* кнопка при наведенні */
  --lp-kos: #2F7FA8;
  --lp-seaglass: #7FC8D6;
  --lp-lime: #F4F1EA;             /* тло сторінки */
  --lp-white: #FFFFFF;
  --lp-paper: #F8F6F1;            /* плитки в картках */
  --lp-sand: #EEEBE3;
  --lp-line: #E2DED4;
  --lp-line-strong: #D3CEC2;
  --lp-outline: #858C98;
  --lp-tint-sky: #DCE8F0;         /* блакитні й пісочні плями тла */
  --lp-tint-sand: #F1E3CD;
  --lp-tint-glass: #E4F3F5;
  --lp-tint-cream: #F7F2E8;
  --lp-tint-blue: #E6EEF4;
  --lp-ok-bg: #E3F0E8;            --lp-ok-fg: #1F4A36;            --lp-ok-ic: #3B7D5C;
  --lp-warn-bg: #F5EDDA;          --lp-warn-fg: #5A4005;          --lp-warn-ic: #8A6100;
  --lp-expired-bg: #F8E5E2;       --lp-expired-fg: #6B1F1D;       --lp-expired-ic: #B3413E;
  --lp-quarantine-bg: #E8E9F4;    --lp-quarantine-fg: #2F3462;    --lp-quarantine-ic: #5C6396;
  --lp-recalled-bg: #F3E6F0;      --lp-recalled-fg: #5B2150;      --lp-recalled-ic: #94477F;
  --lp-transit-bg: #E1EEF4;       --lp-transit-fg: #163F52;       --lp-transit-ic: #2F7391;
  --lp-finished-bg: #EEEBE3;      --lp-finished-fg: #5B6575;      --lp-finished-ic: #858C98;
  /* ілюстрації: упаковка, скло, холодильник, сцени */
  --lp-ill-front-top: #FFFDF8;    --lp-ill-front-bot: #EEE6D6;
  --lp-ill-top: #F5EFE3;
  --lp-ill-side-top: #E4DAC6;     --lp-ill-side-bot: #D2C6AE;
  --lp-ill-box-stroke: #D8CFBE;   --lp-ill-box-edge: #E7DFCF;     --lp-ill-flap: #E2D9C6;
  --lp-ill-print: #D9D2C3;        --lp-ill-print-2: #E3DCCD;
  --lp-ill-screen-top: #F8F6F1;   --lp-ill-screen-bot: #EFEBE2;
  --lp-ill-glass-stroke: #CFDDE3; --lp-ill-liquid-top: #BFE6EC;
  --lp-ill-fridge-top: #EAF3F7;   --lp-ill-fridge-bot: #D9E8F0;   --lp-ill-fridge-body: #D8DDE4;  --lp-ill-fridge-shelf: #B8CCD9;
  --lp-ill-cabinet: #E6E0D3;      --lp-ill-cabinet-in: #F6F3EC;
  --lp-ill-stage-mid: #EEE9DD;    --lp-ill-stage-end: #DCE8F0;
  --lp-ill-stage-b-mid: #F0EBE0;  --lp-ill-stage-b-end: #E0EAF1;
  --lp-ill-shadow-warm: #9C8F76;
  --lp-ill-paper-line: #E4DED0;
  /* плетіння: стрічки «склад», «ЛІС», «аналізатори» */
  --lp-rib-sky: #9DBEDF;
  --lp-rib-sand: #D4C09C;
  --lp-rib-glass: #8FCAD9;
}