/* ============================================================
   ДИЗАЙН-СИСТЕМА LIQUID GLASS — КОНСТАНТЫ
   ------------------------------------------------------------
   Внутри: @font-face Onest, :root со всеми токенами --ls-*,
           светлая тема [data-theme="light"] («Daylight Glass»).
   Зависит: ни от чего. Это единственный файл системы,
           объявляющий :root, и единственный источник цвета,
           стекла, бликов и типографики.
   Точки перелома: нет.
   ============================================================ */

/* ── Локальные шрифты Onest ── */

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

:root {
  /* Базовая цветовая схема: глубокий обсидиан */
  --ls-bg-canvas: #05060A;
  --ls-text-primary: #FFFFFF;
  --ls-text-secondary: rgba(235, 235, 245, 0.72);
  --ls-text-tertiary: rgba(235, 235, 245, 0.44);
  --ls-text-quaternary: rgba(235, 235, 245, 0.22);
  /* Приглушённая роль, которой хватает на подписи кабинета: у tertiary контраст
     3.81:1 на обсидиане и 2.66:1 на дневном стекле — ниже нормы 4.5. Здесь 5.21:1
     и 5.07:1 на худшей из поверхностей, где роль реально стоит (проверяет
     tests/test_app_skin.php), и она всё ещё тише secondary. */
  --ls-text-muted: rgba(235, 235, 245, 0.55);
  
  /* Стеклянные поверхности (Obsidian Liquid Glass) */
  --ls-surface: rgba(255, 255, 255, 0.05);
  --ls-surface-elevated: rgba(255, 255, 255, 0.09);
  --ls-surface-subtle: rgba(255, 255, 255, 0.03);
  --ls-surface-active: rgba(255, 255, 255, 0.14);
  /* Поверхность, которая ложится поверх содержимого, а не рядом с ним:
     поповер ячейки, поповер часа, модалка. Плотнее панели — под ней текст
     и сетка, и сквозь плёнку в 5% они читались бы вместе с надписями. */
  --ls-surface-overlay: rgba(255, 255, 255, 0.12);

  /* Размытие и оптический фильтр стекла: 1px оптическая дисперсия */
  --ls-blur: blur(1px) saturate(90%) contrast(102%);
  /* Размытие поверхности, лежащей поверх содержимого. 1px оставляет буквы
     под поповером различимыми, и глаз читает обе картинки сразу; 10px
     превращает их в ровный фон, на котором читается только поповер. */
  --ls-blur-overlay: blur(10px) saturate(90%) contrast(102%);
  
  /* Crystalline Bevel (микро-фаска стекла) */
  --ls-border: var(--ls-bevel) solid rgba(255, 255, 255, 0.1);
  --ls-border-subtle: var(--ls-bevel) solid rgba(255, 255, 255, 0.08);
  --ls-border-elevated: var(--ls-bevel) solid rgba(255, 255, 255, 0.28);
  --ls-border-accent: var(--ls-bevel) solid rgba(255, 255, 255, 0.40);
  
  /* Чистые микро-блики света без тяжелых теней */
  --ls-specular-panel: inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.22);
  --ls-specular-card: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.18);
  --ls-specular-pill: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.20);
  --ls-specular-btn: inset 0 1.5px 1.5px 0 #FFFFFF;
  
  /* Акценты палитры: монохромная платина и жидкое серебро */
  --ls-accent-primary: #FFFFFF;
  --ls-accent-secondary: #9CA3AF;
  --ls-accent-lime: #10B981;
  /* Сигнал «открыто, идёт, сегодня». Тот же зелёный, что у семьи --ls-cat-teal,
     но выбранный по контрасту к холсту: 13.3:1 на обсидиане, 5.86:1 на дневном
     стекле. Сам --ls-accent-lime подписью работать не может — 1.93:1 на светлом. */
  --ls-accent-go: #6EE7B7;
  --ls-accent-go-wash: rgba(16, 185, 129, 0.18);
  --ls-silver-gradient: linear-gradient(135deg, #FFFFFF 0%, #cbd5e1 22%, #94a3b8 42%, #FFFFFF 56%, #e2e8f0 76%, #94a3b8 100%);
  --ls-gradient-accent: var(--ls-silver-gradient);
  --ls-gradient-btn: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%);
  --ls-gradient-lime: linear-gradient(135deg, #10B981 0%, #059669 100%);

  /* Точечная сетка фона (Dotted Grid Canvas) */
  --ls-dot-color: rgba(255, 255, 255, 0.08);

  /* Типографика */
  --font-native: 'Onest', -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;

  /* ── Числа, у которых до выноса не было имени. Значения прежние ── */

  /* Радиусы: карточка занятия и пилюля-метка */
  --ls-r-card: 22px;
  --ls-r-pill: 999px;

  /* Толщина кристальной фаски (из неё собраны --ls-border*) */
  --ls-bevel: 1px;

  /* Движение стекла: кривая и длительность перехода */
  --ls-e-glass: cubic-bezier(0.16, 1, 0.3, 1);
  --ls-d-glass: 0.24s;

  /* ── Постоянные цвета: намеренно не переворачиваются вместе с темой.
        Заливка кнопки-призыва и текст на ней читаются одинаково в обеих. ── */
  --ls-white: #FFFFFF;
  --ls-black: #000000;
  --ls-ink: #0F1218;          /* тёмная заливка и текст по светлому стеклу */
  --ls-ink-deep: #111113;     /* тёмная заливка главного призыва: .ls-cta-primary и кнопка формы входа */
  --ls-ink-on-white: #090A0E; /* текст по белой заливке */

  /* Белая шкала прозрачности: тонировки стекла поверх любой темы */
  --ls-white-94: rgba(255, 255, 255, 0.94);
  --ls-white-85: rgba(255, 255, 255, 0.85);
  --ls-white-72: rgba(255, 255, 255, 0.72);
  --ls-white-65: rgba(255, 255, 255, 0.65);
  --ls-white-40: rgba(255, 255, 255, 0.4);
  --ls-white-35: rgba(255, 255, 255, 0.35);
  --ls-white-30: rgba(255, 255, 255, 0.3);
  --ls-white-25: rgba(255, 255, 255, 0.25);
  --ls-white-22: rgba(255, 255, 255, 0.22);
  --ls-white-20: rgba(255, 255, 255, 0.2);
  --ls-white-18: rgba(255, 255, 255, 0.18);
  --ls-white-16: rgba(255, 255, 255, 0.16);
  --ls-white-12: rgba(255, 255, 255, 0.12);
  --ls-white-10: rgba(255, 255, 255, 0.1);
  --ls-white-09: rgba(255, 255, 255, 0.09);
  --ls-white-08: rgba(255, 255, 255, 0.08);
  --ls-white-07: rgba(255, 255, 255, 0.07);
  --ls-white-06: rgba(255, 255, 255, 0.06);
  --ls-white-035: rgba(255, 255, 255, 0.035);

  /* Чёрная шкала прозрачности: тем же способом затемняет светлое стекло */
  --ls-black-20: rgba(0, 0, 0, 0.2);
  --ls-black-18: rgba(0, 0, 0, 0.18);
  --ls-black-10: rgba(0, 0, 0, 0.1);
  --ls-black-08: rgba(0, 0, 0, 0.08);
  --ls-black-06: rgba(0, 0, 0, 0.06);
  --ls-black-05: rgba(0, 0, 0, 0.05);
  --ls-black-035: rgba(0, 0, 0, 0.035);
  --ls-black-025: rgba(0, 0, 0, 0.025);

  /* Свободное место в столбце дня: тот же лаймовый акцент, но полупрозрачный */
  --ls-lime-30: rgba(48, 209, 88, 0.3);
  --ls-lime-15: rgba(48, 209, 88, 0.15);

  /* ── Палитра карточки занятия (ds/workout-card.css) ──
        Шесть направлений: метка-категория, аватар тренера и заливка
        шкалы мест. Базовые значения — светлые; тёмные лежат ниже,
        в блоке [data-theme="dark"], ровно как было до выноса. */

  --ls-cat-orange-bg: rgba(255, 149, 0, 0.1);
  --ls-cat-orange-fg: #B45309;
  --ls-cat-orange-line: rgba(255, 149, 0, 0.2);
  --ls-cat-teal-bg: rgba(16, 185, 129, 0.1);
  --ls-cat-teal-fg: #047857;
  --ls-cat-teal-line: rgba(16, 185, 129, 0.2);
  --ls-cat-blue-bg: rgba(0, 0, 0, 0.05);
  --ls-cat-blue-fg: #1E293B;
  --ls-cat-blue-line: rgba(0, 0, 0, 0.1);
  --ls-cat-purple-bg: rgba(168, 85, 247, 0.1);
  --ls-cat-purple-fg: #7E22CE;
  --ls-cat-purple-line: rgba(168, 85, 247, 0.2);
  --ls-cat-crimson-bg: rgba(239, 68, 68, 0.1);
  --ls-cat-crimson-fg: #B91C1C;
  --ls-cat-crimson-line: rgba(239, 68, 68, 0.2);
  --ls-cat-cyan-bg: rgba(6, 182, 212, 0.1);
  --ls-cat-cyan-fg: #0E7490;
  --ls-cat-cyan-line: rgba(6, 182, 212, 0.2);

  --ls-avatar-orange-bg: rgba(255, 149, 0, 0.15);
  --ls-avatar-orange-fg: #C25E00;
  --ls-avatar-orange-line: rgba(255, 149, 0, 0.3);
  --ls-avatar-teal-bg: rgba(46, 125, 89, 0.15);
  --ls-avatar-teal-fg: #1E6B48;
  --ls-avatar-teal-line: rgba(46, 125, 89, 0.3);
  --ls-avatar-blue-bg: rgba(0, 0, 0, 0.05);
  --ls-avatar-blue-fg: #1E293B;
  --ls-avatar-blue-line: rgba(0, 0, 0, 0.1);
  --ls-avatar-purple-bg: rgba(168, 85, 247, 0.12);
  --ls-avatar-purple-fg: #7E22CE;
  --ls-avatar-purple-line: rgba(168, 85, 247, 0.25);
  --ls-avatar-crimson-bg: rgba(239, 68, 68, 0.12);
  --ls-avatar-crimson-fg: #B91C1C;
  --ls-avatar-crimson-line: rgba(239, 68, 68, 0.25);
  --ls-avatar-cyan-bg: rgba(6, 182, 212, 0.12);
  --ls-avatar-cyan-fg: #0E7490;
  --ls-avatar-cyan-line: rgba(6, 182, 212, 0.25);

  --ls-fill-orange: #F59E0B;
  --ls-fill-teal: #10B981;
  --ls-fill-blue: #64748B;
  --ls-fill-purple: #8B5CF6;
  --ls-fill-crimson: #EF4444;
  --ls-fill-cyan: #06B6D4;
  --ls-fill-urgent: #F97316;
  --ls-fill-none: #9CA3AF;

  /* ── Метки тренировок владельца (App\Directory\Palette) ──
        Восемь ключей палитры — те же значения, что в PHP и в calendar.css:
        владелец красит ими свои тренировки, и метка на карточке обязана
        совпасть с кружком в справочнике. Здесь по одному значению на ключ,
        без пары «фон/текст/грань» на каждую тему: карточка разводит их
        через color-mix, а надпись стоит на --ls-text-primary — приглушённый
        оттенок средней светлоты на 18% заливки не тянет контраст сам. */
  --ls-tone-sage: #6E8B72;
  --ls-tone-moss: #7C8B4E;
  --ls-tone-sand: #B99A55;
  --ls-tone-clay: #B07A5A;
  --ls-tone-rust: #A96A5B;
  --ls-tone-plum: #8B6E92;
  --ls-tone-sky: #5F87A8;
  --ls-tone-slate: #6B7480;
  /* Тренировка без выбранного цвета: метка остаётся, цвета у неё нет */
  --ls-tone-none: #8A9099;
  /* Оттенок текущей карточки. Значение приходит от класса .ls-tone--<ключ>
     на самой карточке; здесь — то, чем метка красится, пока ключа нет. */
  --ls-tone: var(--ls-tone-none);

  /* ── Имена, которых системе не хватало для слоя применения ──
        --ls-border* — готовый шорткат рамки целиком, в слот цвета его
        не подставить. Отдельный цвет фаски нужен там, где чужой файл
        задаёт border-color или собирает рамку из color-mix. */
  --ls-line: var(--ls-white-10);
  --ls-line-strong: var(--ls-white-35);

  /* Радиус элемента управления: тот же 12px, что у .ls-input */
  --ls-r-control: 12px;

  /* Затемнение под модальным окном */
  --ls-scrim: rgba(5, 6, 10, 0.62);

  /* Отказ и ошибка. Значение — из палитры карточки (--ls-cat-crimson-fg),
     но темой с ней не связано: имя переворачивается по [data-theme="light"],
     а не по [data-theme="dark"], иначе на обсидиане без атрибута темы
     оно показывало бы светлый вариант. Зелёная пара к нему — --ls-accent-go.
     9.83:1 на обсидиановом стекле, 5.30:1 на дневном. */
  --ls-alert: #FCA5A5;

  /* Заливка разрушающего действия: «Да, отменить», крестик отмены брони.
     Постоянный цвет, как --ls-ink-deep: белая надпись на нём печатается
     разметкой и обязана читаться в обеих темах — 6.47:1. Тревожный красный
     в системе один, и он не переворачивается вместе с темой. */
  --ls-danger: #B91C1C;
  --ls-danger-wash: rgba(185, 28, 28, 0.16);
}

/* Тёмные значения палитры карточки. Селектор [data-theme="dark"], а не :root:
   до выноса эти цвета задавались именно им, и без атрибута страница
   показывала светлые. Порядок сохранён дословно. */

[data-theme="dark"] {
  --ls-cat-orange-bg: rgba(255, 149, 0, 0.18);
  --ls-cat-orange-fg: #FDBA74;
  --ls-cat-orange-line: rgba(255, 149, 0, 0.3);
  --ls-cat-teal-bg: rgba(16, 185, 129, 0.18);
  --ls-cat-teal-fg: #6EE7B7;
  --ls-cat-teal-line: rgba(16, 185, 129, 0.3);
  --ls-cat-blue-bg: rgba(255, 255, 255, 0.12);
  --ls-cat-blue-fg: #F1F5F9;
  --ls-cat-blue-line: rgba(255, 255, 255, 0.2);
  --ls-cat-purple-bg: rgba(168, 85, 247, 0.18);
  --ls-cat-purple-fg: #D8B4FE;
  --ls-cat-purple-line: rgba(168, 85, 247, 0.3);
  --ls-cat-crimson-bg: rgba(239, 68, 68, 0.18);
  --ls-cat-crimson-fg: #FCA5A5;
  --ls-cat-crimson-line: rgba(239, 68, 68, 0.3);
  --ls-cat-cyan-bg: rgba(6, 182, 212, 0.18);
  --ls-cat-cyan-fg: #67E8F9;
  --ls-cat-cyan-line: rgba(6, 182, 212, 0.3);

  --ls-avatar-orange-bg: rgba(255, 149, 0, 0.2);
  --ls-avatar-orange-fg: #FDBA74;
  --ls-avatar-orange-line: rgba(255, 149, 0, 0.3);
  --ls-avatar-teal-bg: rgba(16, 185, 129, 0.2);
  --ls-avatar-teal-fg: #6EE7B7;
  --ls-avatar-teal-line: rgba(16, 185, 129, 0.3);
  --ls-avatar-blue-bg: rgba(255, 255, 255, 0.12);
  --ls-avatar-blue-fg: #F1F5F9;
  --ls-avatar-blue-line: rgba(255, 255, 255, 0.2);
  --ls-avatar-purple-bg: rgba(168, 85, 247, 0.2);
  --ls-avatar-purple-fg: #D8B4FE;
  --ls-avatar-purple-line: rgba(168, 85, 247, 0.3);
  --ls-avatar-crimson-bg: rgba(239, 68, 68, 0.2);
  --ls-avatar-crimson-fg: #FCA5A5;
  --ls-avatar-crimson-line: rgba(239, 68, 68, 0.3);
  --ls-avatar-cyan-bg: rgba(6, 182, 212, 0.2);
  --ls-avatar-cyan-fg: #67E8F9;
  --ls-avatar-cyan-line: rgba(6, 182, 212, 0.3);
}

/* Светлая тема стекла (Daylight Glass) */

[data-theme="light"] {
  --ls-bg-canvas: #DDE1E7;
  --ls-dot-color: rgba(15, 23, 42, 0.13);
  --ls-text-primary: #0F1218;
  --ls-text-secondary: rgba(30, 41, 59, 0.78);
  --ls-text-tertiary: rgba(71, 85, 105, 0.62);
  --ls-text-quaternary: rgba(100, 116, 139, 0.40);
  --ls-text-muted: rgba(71, 85, 105, 0.94);

  --ls-accent-go: #065F46;
  --ls-accent-go-wash: rgba(16, 185, 129, 0.14);
  
  /* Истинное оптическое стекло высокой прозрачности */
  --ls-surface: rgba(255, 255, 255, 0.26);
  --ls-surface-elevated: rgba(255, 255, 255, 0.38);
  --ls-surface-subtle: rgba(255, 255, 255, 0.14);
  --ls-surface-active: rgba(255, 255, 255, 0.44);
  /* Дневная плотность поверхности поверх содержимого: см. обсидиановую выше */
  --ls-surface-overlay: rgba(255, 255, 255, 0.66);

  /* Оптическое размытие: 1px оптическая дисперсия */
  --ls-blur: blur(1px) saturate(90%) contrast(102%);
  --ls-blur-overlay: blur(10px) saturate(90%) contrast(102%);
  
  /* Crystalline Bevel: тонкая кристальная светящаяся грань стекла */
  --ls-border: var(--ls-bevel) solid rgba(255, 255, 255, 0.85);
  --ls-border-subtle: var(--ls-bevel) solid rgba(255, 255, 255, 0.55);
  --ls-border-elevated: var(--ls-bevel) solid #FFFFFF;
  --ls-border-accent: var(--ls-bevel) solid #FFFFFF;
  
  /* Чистые белые микро-блики без грязи и тяжелых теней */
  --ls-specular-panel: inset 0 1.5px 2px 0 #FFFFFF;
  --ls-specular-card: inset 0 1.5px 2px 0 #FFFFFF;
  --ls-specular-pill: inset 0 1.5px 1.5px 0 #FFFFFF;
  --ls-specular-btn: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5);

  --ls-accent-primary: #111113;
  --ls-accent-secondary: #475569;
  --ls-silver-gradient: linear-gradient(135deg, #1E293B 0%, #475569 18%, #94a3b8 34%, #FFFFFF 50%, #cbd5e1 62%, #64748b 80%, #1E293B 100%);
  --ls-gradient-accent: var(--ls-silver-gradient);

  /* Дневные значения имён слоя применения */
  --ls-line: var(--ls-white-85);
  --ls-line-strong: var(--ls-white);
  --ls-scrim: rgba(15, 23, 42, 0.34);
  --ls-alert: #B91C1C;
  --ls-danger-wash: rgba(185, 28, 28, 0.10);
}

/* ── Системная тема: «Как на устройстве клиента» ─────────────────────────────
 *
 * Порядок источников темы — docs/design-system.md §5.1, от сильного к слабому:
 * личный выбор клиента (localStorage['ktrene-theme']) → настройка владельца
 * (theme_default) → система → обсидиан. Первые два ставят на корень data-theme
 * в <head>, поэтому условие системы одно: атрибута нет. Явный выбор всегда
 * сильнее системы, а не наоборот.
 *
 * `[data-ui]` — не украшение селектора, а граница: атрибут стоит на страницах
 * владельца (кабинет, справочники, публичная, вход), у которых тема и есть
 * настройка. На главной его нет, и это осознанно: она эталон системы, её тему
 * ставит собственный скрипт (обсидиан, пока клиент не выбрал светлую), и
 * системное правило не должно подменять первый кадр светлым.
 *
 * Значения ниже — копия блоков [data-theme="light"] и [data-theme="dark"]:
 * «по системе светло» обязано означать ровно Daylight Glass, а не третью тему.
 * Копию держит tests/test_ui_style.php — разъедутся значения, покраснеет прогон.
 */

@media (prefers-color-scheme: light) {
  :root[data-ui]:not([data-theme]) {
    --ls-bg-canvas: #DDE1E7;
    --ls-dot-color: rgba(15, 23, 42, 0.13);
    --ls-text-primary: #0F1218;
    --ls-text-secondary: rgba(30, 41, 59, 0.78);
    --ls-text-tertiary: rgba(71, 85, 105, 0.62);
    --ls-text-quaternary: rgba(100, 116, 139, 0.40);
    --ls-text-muted: rgba(71, 85, 105, 0.94);
    --ls-accent-go: #065F46;
    --ls-accent-go-wash: rgba(16, 185, 129, 0.14);
    --ls-surface: rgba(255, 255, 255, 0.26);
    --ls-surface-elevated: rgba(255, 255, 255, 0.38);
    --ls-surface-subtle: rgba(255, 255, 255, 0.14);
    --ls-surface-active: rgba(255, 255, 255, 0.44);
    --ls-surface-overlay: rgba(255, 255, 255, 0.66);
    --ls-blur: blur(1px) saturate(90%) contrast(102%);
    --ls-blur-overlay: blur(10px) saturate(90%) contrast(102%);
    --ls-border: var(--ls-bevel) solid rgba(255, 255, 255, 0.85);
    --ls-border-subtle: var(--ls-bevel) solid rgba(255, 255, 255, 0.55);
    --ls-border-elevated: var(--ls-bevel) solid #FFFFFF;
    --ls-border-accent: var(--ls-bevel) solid #FFFFFF;
    --ls-specular-panel: inset 0 1.5px 2px 0 #FFFFFF;
    --ls-specular-card: inset 0 1.5px 2px 0 #FFFFFF;
    --ls-specular-pill: inset 0 1.5px 1.5px 0 #FFFFFF;
    --ls-specular-btn: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5);
    --ls-accent-primary: #111113;
    --ls-accent-secondary: #475569;
    --ls-silver-gradient: linear-gradient(135deg, #1E293B 0%, #475569 18%, #94a3b8 34%, #FFFFFF 50%, #cbd5e1 62%, #64748b 80%, #1E293B 100%);
    --ls-gradient-accent: var(--ls-silver-gradient);
    --ls-line: var(--ls-white-85);
    --ls-line-strong: var(--ls-white);
    --ls-scrim: rgba(15, 23, 42, 0.34);
    --ls-alert: #B91C1C;
    --ls-danger-wash: rgba(185, 28, 28, 0.10);
  }
}

/* Тёмная сторона — палитра карточки: базовые её значения светлые (см. §5),
   и без этого блока страница по системной тёмной получила бы обсидиановое
   полотно со светлыми метками. */

@media (prefers-color-scheme: dark) {
  :root[data-ui]:not([data-theme]) {
    --ls-cat-orange-bg: rgba(255, 149, 0, 0.18);
    --ls-cat-orange-fg: #FDBA74;
    --ls-cat-orange-line: rgba(255, 149, 0, 0.3);
    --ls-cat-teal-bg: rgba(16, 185, 129, 0.18);
    --ls-cat-teal-fg: #6EE7B7;
    --ls-cat-teal-line: rgba(16, 185, 129, 0.3);
    --ls-cat-blue-bg: rgba(255, 255, 255, 0.12);
    --ls-cat-blue-fg: #F1F5F9;
    --ls-cat-blue-line: rgba(255, 255, 255, 0.2);
    --ls-cat-purple-bg: rgba(168, 85, 247, 0.18);
    --ls-cat-purple-fg: #D8B4FE;
    --ls-cat-purple-line: rgba(168, 85, 247, 0.3);
    --ls-cat-crimson-bg: rgba(239, 68, 68, 0.18);
    --ls-cat-crimson-fg: #FCA5A5;
    --ls-cat-crimson-line: rgba(239, 68, 68, 0.3);
    --ls-cat-cyan-bg: rgba(6, 182, 212, 0.18);
    --ls-cat-cyan-fg: #67E8F9;
    --ls-cat-cyan-line: rgba(6, 182, 212, 0.3);
    --ls-avatar-orange-bg: rgba(255, 149, 0, 0.2);
    --ls-avatar-orange-fg: #FDBA74;
    --ls-avatar-orange-line: rgba(255, 149, 0, 0.3);
    --ls-avatar-teal-bg: rgba(16, 185, 129, 0.2);
    --ls-avatar-teal-fg: #6EE7B7;
    --ls-avatar-teal-line: rgba(16, 185, 129, 0.3);
    --ls-avatar-blue-bg: rgba(255, 255, 255, 0.12);
    --ls-avatar-blue-fg: #F1F5F9;
    --ls-avatar-blue-line: rgba(255, 255, 255, 0.2);
    --ls-avatar-purple-bg: rgba(168, 85, 247, 0.2);
    --ls-avatar-purple-fg: #D8B4FE;
    --ls-avatar-purple-line: rgba(168, 85, 247, 0.3);
    --ls-avatar-crimson-bg: rgba(239, 68, 68, 0.2);
    --ls-avatar-crimson-fg: #FCA5A5;
    --ls-avatar-crimson-line: rgba(239, 68, 68, 0.3);
    --ls-avatar-cyan-bg: rgba(6, 182, 212, 0.2);
    --ls-avatar-cyan-fg: #67E8F9;
    --ls-avatar-cyan-line: rgba(6, 182, 212, 0.3);
  }
}