/* Копия src/design/tokens.css с коммита bd5eae10 (08.10.2026) для прототипа калькулятора — не править, обновлять копированием. */
/* ============================================================================
   tokens.css — единственный источник значений дизайн-системы.
   ----------------------------------------------------------------------------
   Эстетика: язык кабинета TOPEXAMS (мягкие squircle-формы, парящие тени,
   свет по кромке, сочный голубой) на белом холсте документа.

   ТРИ СЛОЯ. Сырьё (--raw-*) → семантика (--text-*, --surface-*, --r-*, ...)
   → компоненты. В компонентах и примитивах ссылаться ТОЛЬКО на семантику.
   Сырые hex/rgba, px-радиусы, тени и z-index вне этого файла запрещены
   (проверка `npm run check:style`).

   РЕШЕНИЯ-ПЕРЕКЛЮЧАТЕЛИ. Открытые дизайн-решения задаются атрибутами
   на <html>: data-fill (aa | juicy), data-ink (graphite | notion).
   Их переключает витрина (#/design), выбор хранится в localStorage.

   Канон света и места меню — docs/core-and-domains.md, «Меню и плавающие
   объекты»: один блик --rim у всего, что парит, в обеих темах.
   ============================================================================ */

:root {
  color-scheme: light;
  /* --- СЫРЬЁ · поверхности ---------------------------------------------------
     Лестница светлоты: подложка приложения темнее плавающих панелей,
     холст документа — чистый белый. Блик по кромке читается за счёт этой
     разницы и за счёт волосяной линии, которая «гаснет» в освещённых углах. */
  --raw-white: #ffffff;
  --raw-bone: #fbfbfa;     /* плавающие панели: сайдбар, поповеры, карточки */
  --raw-cloud: #f5f5f3;    /* вторичная поверхность, лотки, hover-заливки */
  --raw-mist: #efefec;     /* подложка приложения под плавающими панелями */
  --raw-sunken: #ededea;   /* утопленные поля, дорожки переключателей */
  --raw-frost: #f9f9f8;    /* стекло плавающих объектов: чуть темнее белого, чтобы читался белый отсвет кромки */
  --raw-raised: #ffffff;   /* приподнятое над стеклом: наведение на капсулу и круг линии инструментов */
  --raw-rim: 1;            /* сила белого блика по кромке: в светлой — чистый белый, тёмная приглушает */

  /* --- СЫРЬЁ · чернила (переключаются data-ink) ------------------------------ */
  --raw-ink: #222124;
  --raw-ink-soft: #403e42;
  --raw-ink-mute: #67646b;
  --raw-ink-faint: #9a968f;
  --raw-ink-rgb: 34, 33, 36;
  --raw-shade-rgb: 128, 128, 128;  /* нейтральное затенение: серый без оттенка — стекло с насыщенностью не окрашивает его */

  /* --- СЫРЬЁ · голубые (переключаются data-fill) -----------------------------
     accent красит то, что ЧИТАЮТ; fill — то, что НАЖИМАЮТ. */
  --raw-accent: #007acc;
  --raw-accent-hover: #0069b3;
  --raw-fill: #1a73d9;         /* AA: белый текст 4.67:1 */
  --raw-fill-hover: #1667c4;
  --raw-fill-active: #135bb0;
  --raw-fill-blik: transparent; /* свет по кромке заливки; выключен — см. data-blik */
  --raw-accent-soft: #e9f3fd;

  /* --- СЫРЬЁ · severity ------------------------------------------------------
     Цвет СОСТОЯНИЯ. Всегда вместе с формой значка и текстом. */
  --raw-critical: #d03b3b;  --raw-critical-soft: #fbeae9;
  --raw-serious: #e07b45;   --raw-serious-soft: #fbeee4;
  --raw-warning: #c98208;   --raw-warning-soft: #fbf1dd;
  --raw-good: #12a012;      --raw-good-soft: #e7f5e7;

  /* ==========================================================================
     СЕМАНТИКА — на это ссылаются примитивы и компоненты
     ========================================================================== */

  /* --- Поверхности --- */
  --surface-backdrop: var(--raw-mist);    /* фон окна под плавающими листами */
  /* Map overlay contrast follows the basemap, which can differ from the interface. */
  --map-light-canvas: #ffffff;
  --map-light-text: #414244;
  --map-light-muted: #747679;
  --map-dark-canvas: #202b38;
  --map-dark-text: #e8e9ed;
  --map-dark-muted: #b0b3bc;
  --map-dark-marker-edge: #c7d2df;
  --surface-canvas: var(--raw-white);     /* холст документа */
  --surface-1: var(--raw-bone);           /* поднятый объект: панель, поповер, карточка */
  --surface-2: var(--raw-cloud);          /* вторичное, лоток, активный пункт */
  --surface-sunken: var(--raw-sunken);    /* поле ввода, дорожка */
  /* приподнятое: светлее стекла под ним — наведение на капсулу и круг линии
     инструментов. В светлой теме совпадает с белым холстом, в тёмной холст
     самый тёмный, поэтому приподнятое — отдельный токен (TASK-192). Выбранный
     сегмент — не приподнятое, а текущее место: --surface-current */
  --surface-raised: var(--raw-raised);
  /* стекло всех плавающих объектов — панелей и капсул — одного тона: разный
     оттенок у сайдбара и кнопок читается как ошибка (замечание 33) */
  --surface-glass: color-mix(in srgb, var(--raw-frost) 88%, transparent);
  --glass-blur: blur(24px) saturate(1.8);  /* размытие и сочность того, что под стеклом */
  /* плотное стекло над движущимся фоном — картой: тон стекла, почти без
     прозрачности и без размытия. Размытие над картой пересчитывалось на
     каждом кадре её перемещения и масштаба (TASK-135) */
  --surface-glass-dense: color-mix(in srgb, var(--raw-frost) 95%, transparent);
  --surface-tray: var(--raw-cloud);       /* лоток под карточками (колонка доски) */
  --surface-hover: rgba(var(--raw-ink-rgb), 0.05);
  --surface-selected: rgba(var(--raw-ink-rgb), 0.08);
  --surface-pressed: rgba(var(--raw-ink-rgb), 0.11);
  /* подложка второго действия («Отмена»): чуть плотнее наведения, без рамки */
  --surface-btn: rgba(var(--raw-ink-rgb), 0.07);
  --surface-btn-hover: rgba(var(--raw-ink-rgb), 0.11);
  --surface-focus: rgba(0, 122, 204, 0.10);
  --surface-block-selected: rgba(0, 122, 204, 0.14); /* блок, выделенный по ⋮⋮ */
  --surface-danger-hover: rgba(208, 59, 59, 0.08);
  --surface-inverse: var(--raw-ink);      /* тёмная кнопка, активный чип-фильтр */
  --surface-current: var(--raw-accent-soft); /* текущее место: открытая страница в сайдбаре, активная вкладка */
  --scrim: rgba(var(--raw-ink-rgb), 0.28);

  /* --- Текст --- */
  --text-primary: var(--raw-ink);
  --text-strong: var(--raw-ink-soft);
  --text-secondary: var(--raw-ink-mute);
  --text-tertiary: var(--raw-ink-faint);
  --text-disabled: rgba(var(--raw-ink-rgb), 0.36);
  --text-inverse: var(--raw-white);
  --text-link: var(--raw-accent);
  --text-danger: var(--raw-critical);
  --text-current: var(--text-primary);      /* подпись текущего места, пара к --surface-current */

  /* --- Линии --- */
  --line: rgba(var(--raw-ink-rgb), 0.10);
  --line-soft: rgba(var(--raw-ink-rgb), 0.06);
  --line-strong: rgba(var(--raw-ink-rgb), 0.16);
  --line-hover: rgba(var(--raw-ink-rgb), 0.20);
  --divider: var(--line-soft);
  /* контур карточек, полей и прочего, что не парит: тонкий и тёмный — вместе
     с тенью даёт контраст без серой заливки. На экранах без ретины полпикселя
     нет — там 1px и светлее. У того, что парит, контур свой: --edge-capsule
     и --edge-float. В тёмной --edge светлый и вместе с бликом --rim дал бы
     толстую яркую рамку (TASK-205, проверяет check:style) */
  --hairline: 0.5px;
  --edge: rgba(var(--raw-ink-rgb), 0.18);
  /* контур капсул и кругов линии инструментов: блик читается за счёт пары
     «тёмный контур снаружи — светлая дуга внутри». В светлой теме это --edge,
     в тёмной светлый --edge сливался с бликом в одну рамку (TASK-192) */
  --edge-capsule: var(--edge);
  /* контур плавающих панелей и меню (сайдбар, карточка сбоку, карта рядом
     с базой, меню, всплывающие окна): в светлой — --edge; в тёмной край держит
     пара, как у капсул: тёмный контур снаружи, блик --rim изнутри (TASK-192) */
  --edge-float: var(--edge);
  /* Свет стекла, как в macOS Tahoe: снаружи тонкий тёмный контур --edge;
     изнутри тонкий блик по обоим краям — сверху и снизу одинаковый, бока и
     середина чистые (--rim; замечание 198: блик только снизу и тень под
     верхним краем читались как неровный свет). Блик один у всего, что парит:
     капсулы, меню, окна, панели — в обеих темах, тема меняет только силу
     (--raw-rim). Блик сверху ярче, чем снизу, и белое кольцо по всему краю
     читались как дефект (TASK-198). --glass-shade — лишь тонкая кайма по
     контуру капсулы; внутри большой панели тень читается как углубление
     (замечание 34), поэтому у панелей и меню её нет. Пятна света в углах
     отвергнуты — контур выходил неровным (замечание 29). */
  --glass-shade-sm: inset 0 4px 5px -4px rgba(var(--raw-ink-rgb), 0.06);
  /* блик в 1px; отрицательный разброс укорачивает дуги — бока капсулы
     и круга без блика (замечания 200–201: сплошной белый обод) */
  --rim: inset 0 2px 0 -1px rgba(255, 255, 255, var(--raw-rim)), inset 0 -2px 0 -1px rgba(255, 255, 255, var(--raw-rim));
  --glass-shade: inset 0 0 6px -4px rgba(var(--raw-ink-rgb), 0.04);

  /* --- Акцент --- */
  --accent: var(--raw-accent);
  --accent-hover: var(--raw-accent-hover);
  --accent-soft: var(--raw-accent-soft);
  --accent-edge: rgba(0, 122, 204, 0.32);
  --fill: var(--raw-fill);
  --fill-hover: var(--raw-fill-hover);
  --fill-active: var(--raw-fill-active);
  --fill-blik: var(--raw-fill-blik);
  --fill-on: var(--raw-white);
  --text-on-media: #ffffff;
  --media-scrim: rgba(0, 0, 0, 0.55);
  --fill-danger: #b63838;
  --fill-danger-hover: color-mix(in srgb, var(--fill-danger) 88%, black);
  --focus-ring-color: rgba(0, 122, 204, 0.42);
  --focus-halo: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--focus-ring-color);

  /* --- Severity --- */
  --sev-critical: var(--raw-critical);  --sev-critical-soft: var(--raw-critical-soft);
  --sev-serious: var(--raw-serious);    --sev-serious-soft: var(--raw-serious-soft);
  --sev-warning: var(--raw-warning);    --sev-warning-soft: var(--raw-warning-soft);
  --sev-good: var(--raw-good);          --sev-good-soft: var(--raw-good-soft);

  /* --- Радиусы по ролям ------------------------------------------------------
     Два семейства форм, других нет:
     1. Контейнеры и их содержимое — концентрические радиусы: внутренний =
        внешний − отступ. Базой служит --r-control (кнопка, строка, поле);
        радиус контейнера выводится из него и отступа до содержимого, поэтому
        строки сайдбара, меню и карточки повторяют изгиб своей панели.
     2. Линия инструментов окна (вкладки, «Поделиться», ⋯) — капсулы и круги
        --r-pill, как в тулбаре macOS: они стоят на холсте сами по себе, без
        внешнего контейнера. Внутри капсулы — снова капсулы. */
  --r-xs: 5px;        /* чекбокс, мелкая метка, код в строке */
  --r-chip: 8px;      /* пилюля значения, тег */
  --r-control: 10px;  /* кнопка, поле, пункт меню, строка сайдбара */
  --r-inner: calc(var(--r-control) - 4px); /* мелкая кнопка в строке: ⋯ сайдбара, ручки блока */
  --r-row: 12px;      /* строка-карточка, callout, изображение */
  --r-card: 16px;     /* карточка доски/галереи */
  --popover-inset: var(--panel-inset);           /* отступ меню и поповера до строк — тот же, что у панелей */
  --r-popover: calc(var(--r-control) + var(--popover-inset)); /* поповер, меню: концентрично строкам */
  --r-shell: calc(var(--r-control) + var(--space-2)); /* сайдбар, боковая карточка: отступ 8px */
  --r-panel: calc(var(--r-control) + 14px);     /* модалка, вход: отступ 14px */
  /* карточка записи (сбоку, по центру, встроенная): в углах — капсулы линии
     инструментов, радиус капсулы + отступ до края — углы концентричны */
  --r-toolbar-shell: calc(var(--toolbar-control-h) / 2 + var(--toolbar-shell-inset) + var(--hairline));
  --r-pill: 999px;    /* линия инструментов: капсулы и круги */

  /* --- Объём ------------------------------------------------------------------
     Три режима: A плоский (линия), B блик без линии, C блик с линией.
     Физика — в примитиве .ui-lift (primitives.css). */
  --blik-t: 1px;                          /* толщина кромки со светом */
  --blik: transparent;                    /* свет по кромке; выключен решением 28.09 — см. data-blik */
  --blik-spot: 70%;                       /* размер пятна света в % от блока */
  --elev-flat: none;
  --elev-shell: 0 1px 2px rgba(var(--raw-ink-rgb), 0.04), 0 12px 32px -20px rgba(var(--raw-ink-rgb), 0.20);
  --elev-card: 0 1px 2px rgba(var(--raw-ink-rgb), 0.05), 0 12px 28px -18px rgba(var(--raw-ink-rgb), 0.24);
  --elev-raised: 0 2px 6px rgba(var(--raw-ink-rgb), 0.06), 0 24px 48px -20px rgba(var(--raw-ink-rgb), 0.32);
  --elev-panel: 0 4px 14px rgba(var(--raw-ink-rgb), 0.06), 0 40px 80px -30px rgba(var(--raw-ink-rgb), 0.38);
  /* плавающая панель поверх основной (сайдбар, боковая карточка): контактная
     тень + широкая мягкая — панель «нависает», а не стоит рядом */
  /* панели во всю высоту: ровная мягкая тень почти без сдвига вниз —
     панель парит (замечание 34); большой сдвиг и размытие ложились на белый
     лист грязной серой полосой вдоль края (замечание 24) */
  --elev-float: 0 1px 3px rgba(var(--raw-ink-rgb), 0.07), 0 4px 16px -2px rgba(var(--raw-ink-rgb), 0.14);
  /* активная вкладка: не плоская заливка, а стеклянная капля — свет стекла и мягкая голубая тень
     снаружи. Без контура: на широкой строке он читается как поле ввода в
     фокусе (замечание 35). Свет ровный со всех сторон — белая кромка по
     всему краю и голубой ореол почти без сдвига: иначе капля выглядит
     однобокой (замечание 39) */
  /* контур капли выделения — тот же, что у стекла: голубой на голубом еле
     виден (замечание 48, выбор пользователя) */
  --edge-current: var(--edge);
  --elev-current: inset 0 0 0 1px rgba(255, 255, 255, calc(0.6 * var(--raw-rim))), var(--glass-shade-sm), 0 0.5px 4px rgba(0, 122, 204, 0.16);
  /* капсула на линии инструментов: мягкая тень снизу — капсула парит над листом */
  --elev-capsule: 0 1px 2px rgba(var(--raw-ink-rgb), 0.05), 0 4px 14px -5px rgba(var(--raw-ink-rgb), 0.13);
  --elev-control: 0 1px 2px rgba(var(--raw-ink-rgb), 0.06);
  /* залитая кнопка: едва заметная тень — кнопка лежит на листе, а не нарисована на нём */
  --elev-btn: 0 1px 2px rgba(var(--raw-ink-rgb), 0.14);
  --elev-thumb: 0 1px 2px rgba(var(--raw-ink-rgb), 0.18), 0 2px 6px rgba(var(--raw-ink-rgb), 0.10);

  /* --- Слои --- */
  --z-raised: 1;
  --z-sticky: 20;
  --z-sidebar: 40;
  --z-dropdown: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;

  /* --- Движение --- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  /* движение каркаса: сайдбар, отступы листа и строки, выезд карточки записи.
     Одна длительность (= PEEK_MOTION_MS в peek-motion.tsx) и одна мягкая
     кривая — всё, что сдвигается вместе, едет синхронно */
  --dur-shell: 220ms;
  --ease-shell: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  /* живые метки карты (TASK-164): медленное «дыхание» ореола — заметно, но не дёргает глаз */
  --dur-breathe: 3500ms;

  /* --- Отступы и размеры --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  /* зазор плавающих листов от краёв окна; от него — строка инструментов:
     12 — больше воздуха между краем окна и кнопками (29.09.2026) */
  --shell-gap: 12px;
  --sidebar-width: 280px;
  --sidebar-rail-w: 20px;     /* место палочки скрытого сайдбара у левого края */
  /* внутренний отступ плавающей панели от её края до кнопок шапки */
  --panel-inset: 6px;
  /* строка инструментов окна. Шапки сайдбара и боковой карточки встают на её
     среднюю линию: панель начинается на --shell-gap от края окна, рамка,
     затем --panel-inset и капсула высотой --toolbar-control-h (29.09.2026:
     строка ниже, капсулам в углу карточки — воздух --panel-inset) */
  --toolbar-h: calc(2 * (var(--shell-gap) + var(--hairline) + var(--panel-inset)) + var(--toolbar-control-h));
  --control-h-sm: 28px;
  --control-h: 32px;
  --toolbar-control-h: 38px;  /* капсулы на линии инструментов: вкладки, действия */
  --toolbar-inset: 4px;       /* воздух внутри капсулы вкладок: между краем и вкладкой, между вкладками */
  /* капсулы в углах карточки записи — один отступ сверху и сбоку, как у
     шапки любой плавающей панели; в боковой карточке они на средней линии
     строки инструментов, рядом с кнопками окна */
  --toolbar-shell-inset: var(--panel-inset);
  --control-h-lg: 40px;
  /* Шкала размеров контролов (TASK-206.11): размер — одна ручка, высота задаёт
     кегль, отступ сбоку, значок и промежуток. Числа — только здесь; применяют
     .ui-size-* (primitives.css), контейнер с размером передаёт его всем внутри. */
  --size-xs-h: 24px;
  --size-xs-fs: var(--type-tag-size);
  --size-xs-px: var(--space-2);
  --size-xs-icon: var(--icon-sm);
  --size-xs-gap: var(--space-1);
  --size-sm-h: var(--control-h-sm);
  --size-sm-fs: var(--type-ui-size);
  --size-sm-px: var(--space-3);
  --size-sm-icon: var(--icon-md);
  --size-sm-gap: 6px;
  --size-md-h: var(--control-h);
  --size-md-fs: var(--type-ui-size);
  --size-md-px: 14px;
  --size-md-icon: var(--icon-md);
  --size-md-gap: 6px;
  --size-lg-h: var(--control-h-lg);
  --size-lg-fs: var(--type-menu-title-size);
  --size-lg-px: 18px;
  --size-lg-icon: var(--icon-lg);
  --size-lg-gap: var(--space-2);
  --menu-row-h: var(--control-h);  /* строка меню и поповера; на телефоне — под палец */
  /* строка списка — сайдбар, меню, список (TASK-206.11): кнопки в строке — xs
     на отступе --row-inset, скругление «строка − отступ» — концентрично строке */
  --row-h: var(--menu-row-h);
  --row-inset: calc((var(--row-h) - var(--size-xs-h)) / 2);
  --menu-icon-slot: 20px;          /* место под значок в строке меню: подписи строк со значком и без встают на одну линию */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 20px;
  --icon-stroke: 1.75;

  /* --- Типографика ------------------------------------------------------------
     Шкала размеров из TASK-004 сохранена. Добавлены overline и display. */
  /* Inter — выбор пользователя на стенде (замечание 49); шрифт в сборке
     (@fontsource-variable/inter), работает без сети */
  --font-sans: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --type-ui-size: 13px;
  --type-ui-line: 18px;
  --type-menu-title-size: 14px;
  --type-menu-title-line: 20px;
  --type-data-size: 14px;
  --type-data-line: 20px;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-caption-size: 11px;
  --type-caption-line: 16px;
  --type-tag-size: 12px;
  --type-tag-line: 18px;
  --type-overline-size: 11px;
  --type-overline-line: 16px;
  --type-overline-tracking: 0.08em;
  --type-display-tracking: -0.035em;
  /* Иконка рядом с текстом — одна пропорция везде (замечания 52, 66, 76):
     сторона иконки = размер текста × 1,15, до целого пикселя. Сайдбар
     14 → 16, крошки и вкладки 13 → 15, заголовок записи 32 → 37,
     страницы 40 → 46, ссылка на подстраницу в тексте 16 → 18. */
  --icon-text-ratio: 1.15;
  --icon-ui: round(calc(var(--type-ui-size) * var(--icon-text-ratio)), 1px);
  --icon-data: round(calc(var(--type-data-size) * var(--icon-text-ratio)), 1px);
  --icon-body: round(calc(var(--type-body-size) * var(--icon-text-ratio)), 1px);
  /* Иконка в строке встаёт нижним краем на линию низа букв без хвоста вниз
     (TASK-244.01; раньше — подъём на 1px, замечание 78). По центру строки её
     низ ниже этой линии: у Inter линия низа букв на 0,35 кегля ниже середины
     строки. Подъём = половина иконки − 0,35 кегля текста рядом (styles.css,
     правило иконок в строке); кегль — --icon-line-text места или сторона
     иконки / 1,15. */
  --icon-baseline-drop: .35;
  /* …и приспущена на 0,06 стороны (≈1px у иконок 15–16px): ровно на линии иконка выше заглавных
     и кажется висящей над текстом (замечание пользователя 05.10, TASK-244.01). */
  --icon-baseline-sink: .06;
  --type-heading-tracking: -0.02em;
  --type-ui-tracking: -0.01em;

  /* --- Контентная палитра ----------------------------------------------------
     Единственный источник цветов контента: текст и фон блоков и строк,
     пилюли значений, точки групп, кнопки, колонки доски, цветные иконки.
     Общая палитра всех продуктов (TASK-166.03): умеренная насыщенность,
     разнесённые оттенки, графитовые серые иконки и солнечный жёлтый.
     HEX для маркеров и смешивания кластеров — MAP_COLORS в map-view-settings.ts,
     те же значения, что -dot; слои realty читают эти токены напрямую.
     Имена совпадают с DatabaseColor: default gray brown orange yellow green
     blue purple pink red. -text текст, -bg фон блока и строки, -pill заливка
     пилюли, -pill-text текст пилюли, -edge цветная обводка, -dot точка
     группы и образец цвета, -icon встроенная иконка (насыщеннее текста). */
  --color-default-text: var(--text-primary);
  --color-default-bg: transparent;
  --color-default-pill: rgba(var(--raw-ink-rgb), 0.07);
  --color-default-pill-text: var(--text-strong);
  --color-default-edge: rgba(var(--raw-ink-rgb), 0.12);
  --color-default-dot: rgba(var(--raw-ink-rgb), 0.32);
  --color-default-icon: var(--text-secondary);

  --color-gray-text: #747679; --color-gray-bg: #f4f4f5; --color-gray-pill: #e2e3e4; --color-gray-pill-text: #3b3d40; --color-gray-edge: rgba(126, 128, 132, 0.3); --color-gray-dot: #7e8084; --color-gray-icon: #414244;
  --color-brown-text: #986c54; --color-brown-bg: #fbf2ee; --color-brown-pill: #f3ded3; --color-brown-pill-text: #4f3729; --color-brown-edge: rgba(153, 107, 82, 0.3); --color-brown-dot: #996b52; --color-brown-icon: #996b52;
  --color-orange-text: #b75d00; --color-orange-bg: #fff1e6; --color-orange-pill: #ffd9be; --color-orange-pill-text: #602d00; --color-orange-edge: rgba(228, 130, 51, 0.3); --color-orange-dot: #e48233; --color-orange-icon: #e48233;
  --color-yellow-text: #9e6c00; --color-yellow-bg: #fcf4e1; --color-yellow-pill: #fae2ae; --color-yellow-pill-text: #523800; --color-yellow-edge: rgba(253, 196, 42, 0.3); --color-yellow-dot: #fdc42a; --color-yellow-icon: #fdc42a;
  --color-green-text: #3d7d35; --color-green-bg: #f3fbf2; --color-green-pill: #d4f2d1; --color-green-pill-text: #2d5827; --color-green-edge: rgba(111, 212, 103, 0.3); --color-green-dot: #6fd467; --color-green-icon: #4a9f44;
  --color-blue-text: #2e77ce; --color-blue-bg: #e9f6ff; --color-blue-pill: #c9e6ff; --color-blue-pill-text: #183d6b; --color-blue-edge: rgba(57, 134, 228, 0.3); --color-blue-dot: #3986e4; --color-blue-icon: #3986e4;
  --color-purple-text: #8e61bd; --color-purple-bg: #f8f1ff; --color-purple-pill: #ecdaff; --color-purple-pill-text: #482f62; --color-purple-edge: rgba(149, 101, 199, 0.3); --color-purple-dot: #9565c7; --color-purple-icon: #9565c7;
  --color-pink-text: #ba5380; --color-pink-bg: #ffeef5; --color-pink-pill: #ffd3e5; --color-pink-pill-text: #60263f; --color-pink-edge: rgba(215, 103, 151, 0.3); --color-pink-dot: #d76797; --color-pink-icon: #d76797;
  --color-red-text: #ca4c44; --color-red-bg: #ffeeeb; --color-red-pill: #ffd5ce; --color-red-pill-text: #642722; --color-red-edge: rgba(210, 77, 69, 0.3); --color-red-dot: #d24d45; --color-red-icon: #d24d45;

  /* ==========================================================================
     СОВМЕСТИМОСТЬ — старые имена переменных указывают на новую семантику.
     Новые правила их не используют; удаляются по мере миграции.
     ========================================================================== */
  --sidebar: var(--surface-1);
  --canvas: var(--surface-canvas);
  --hover: var(--surface-hover);
  --active: var(--surface-selected);
  --border: var(--line);
  --muted: var(--text-secondary);
  --soft: var(--surface-2);
  --text: var(--text-primary);
  --blue: var(--accent);
  --blue-soft: var(--accent-soft);
  --red: var(--text-danger);
  --danger: var(--text-danger);
  --focus-ring: var(--focus-ring-color);
  --shadow: 0 0 0 1px var(--line), var(--elev-raised);
}

@media (max-resolution: 1.49dppx) {
  :root { --hairline: 1px; --edge: rgba(var(--raw-ink-rgb), 0.12); }
}

@media (max-width: 768px) {
  :root {
    --menu-row-h: var(--control-h-lg);
    --shell-gap: 8px;
    /* под палец: обычный размер дорастает до крупного, плотные остаются */
    --size-md-h: var(--size-lg-h);
    --size-md-fs: var(--size-lg-fs);
    --size-md-px: var(--size-lg-px);
    --size-md-icon: var(--size-lg-icon);
    --size-md-gap: var(--size-lg-gap);
  }
}


/* --- Решение: свет по кромке ----------------------------------------------
   По умолчанию выключен (28.09.2026: «блики не смотрятся, пока плоско»).
   data-blik="on" возвращает свет эталона TOPEXAMS без правки компонентов. */
:root[data-blik="on"] {
  --blik: rgba(255, 255, 255, 1);
  --raw-fill-blik: #9df0ff;
}

/* --- Решение: заливка голубого ---------------------------------------------
   aa (по умолчанию) — белый текст проходит WCAG AA.
   juicy — сочный голубой эталона TOPEXAMS (белый текст 2.8:1). */
:root[data-fill="juicy"] {
  --raw-fill: #3b9eff;
  --raw-fill-hover: #2a90f5;
  --raw-fill-active: #1a80e8;
}

/* --- Решение: тон чернил ----------------------------------------------------
   graphite (по умолчанию) — near-black эталона.
   notion — тёплый коричнево-чёрный Notion. */
:root[data-ink="notion"] {
  --raw-ink: #37352f;
  --raw-ink-soft: #4a4843;
  --raw-ink-mute: #6f6e69;
  --raw-ink-faint: #9b9a97;
  --raw-ink-rgb: 55, 53, 47;
}

/* Manual dark theme. Literal white remains white for labels on filled buttons;
   canvas, inverse text and lighting are separate roles. Content color ids and
   map dots do not change when the user switches appearance. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas: #191a1d;
  --raw-bone: #222327;
  --raw-cloud: #292b30;
  --raw-mist: #141518;
  --raw-sunken: #2b2d32;
  --raw-frost: #25262b;
  /* наведение светлее стекла (#25262b) примерно настолько же, насколько белый
     светлее утопленной дорожки в светлой теме: контраст около 1.2:1 */
  --raw-raised: #383a40;
  /* блик той же формы, что в светлой (сверху и снизу), белый на тёмном
     стекле приглушён */
  --raw-rim: 0.24;
  --raw-ink: #e8e9ed;
  --raw-ink-soft: #d5d7dd;
  --raw-ink-mute: #b0b3bc;
  --raw-ink-faint: #90949f;
  --raw-ink-rgb: 232, 233, 237;
  --raw-shade-rgb: 0, 0, 0;
  --raw-accent: #72c5ff;
  --raw-accent-hover: #a3daff;
  --raw-accent-soft: #223b50;
  --raw-critical: #ff9690; --raw-critical-soft: #462a2c;
  --raw-serious: #f3b087; --raw-serious-soft: #423128;
  --raw-warning: #ebc269; --raw-warning-soft: #3d3423;
  --raw-good: #85d699; --raw-good-soft: #243c2b;
  --text-inverse: #191a1d;
  --scrim: rgba(0, 0, 0, 0.6);
  --surface-focus: rgba(114, 197, 255, 0.22);
  --surface-block-selected: rgba(114, 197, 255, 0.2);
  --surface-danger-hover: rgba(255, 150, 144, 0.1);
  --accent-edge: rgba(114, 197, 255, 0.36);
  --focus-ring-color: rgba(114, 197, 255, 0.65);
  --edge: rgba(232, 233, 237, 0.14);
  --edge-capsule: rgba(0, 0, 0, 0.4);
  --glass-shade-sm: inset 0 4px 5px -4px rgba(0, 0, 0, 0.18);
  --glass-shade: inset 0 0 6px -4px rgba(0, 0, 0, 0.2);
  --elev-shell: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 32px -20px rgba(0, 0, 0, 0.5);
  --elev-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 28px -18px rgba(0, 0, 0, 0.5);
  --elev-raised: 0 2px 6px rgba(0, 0, 0, 0.25), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  --elev-panel: 0 4px 14px rgba(0, 0, 0, 0.3), 0 40px 80px -30px rgba(0, 0, 0, 0.65);
  /* светлый контур вплотную к светлому кольцу читался двойной полосой,
     яркое свечение — ореолом (замечания 02.10): контур тёмный, свет даёт
     блик изнутри, снаружи — едва заметное свечение вместо невидимой тени */
  --edge-float: rgba(0, 0, 0, 0.5);
  --elev-float: 0 0 12px rgba(255, 255, 255, 0.03);
  /* капля выделения в тёмной — та же пара, что у капсул: тёмный контур
     снаружи, тонкое светлое кольцо изнутри, без цветного ореола. Светлый
     контур вплотную к кольцу читался толстой рамкой, ореол акцента на тёмном
     фоне — пятном света вокруг кнопки (TASK-205) */
  --edge-current: var(--edge-capsule);
  --elev-current: inset 0 0 0 var(--hairline) rgba(255, 255, 255, calc(0.6 * var(--raw-rim))), var(--glass-shade-sm);
  --elev-capsule: 0 1px 2px rgba(0, 0, 0, 0.15), 0 4px 14px -5px rgba(0, 0, 0, 0.35);
  --elev-control: 0 1px 2px rgba(0, 0, 0, 0.22);
  --elev-btn: 0 1px 2px rgba(0, 0, 0, 0.3);
  --elev-thumb: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18);
  --color-gray-text: #b4b7c0; --color-gray-bg: #27292e; --color-gray-pill: #36393f; --color-gray-pill-text: #dedfe4; --color-gray-icon: #a6aab3;
  --color-brown-text: #d7aa8f; --color-brown-bg: #322925; --color-brown-pill: #4a372e; --color-brown-pill-text: #edc7af; --color-brown-icon: #cd9b7f;
  --color-orange-text: #f4b078; --color-orange-bg: #382a21; --color-orange-pill: #523724; --color-orange-pill-text: #ffcd9e; --color-orange-icon: #eda064;
  --color-yellow-text: #e8c96b; --color-yellow-bg: #342f21; --color-yellow-pill: #493f25; --color-yellow-pill-text: #f6df97; --color-yellow-icon: #fdc42a;
  --color-green-text: #a3d89b; --color-green-bg: #2a3327; --color-green-pill: #314a2c; --color-green-pill-text: #c5eabe; --color-green-edge: rgba(111, 212, 103, 0.3); --color-green-dot: #6fd467; --color-green-icon: #6fd467;
  --color-blue-text: #8bc1fa; --color-blue-bg: #222e3d; --color-blue-pill: #2a405b; --color-blue-pill-text: #b5d9ff; --color-blue-icon: #74b0ed;
  --color-purple-text: #c5a4eb; --color-purple-bg: #2e2639; --color-purple-pill: #423154; --color-purple-pill-text: #ddc1ff; --color-purple-icon: #b28cde;
  --color-pink-text: #ec9fc1; --color-pink-bg: #372631; --color-pink-pill: #513044; --color-pink-pill-text: #ffc3de; --color-pink-icon: #e38eb6;
  --color-red-text: #f59b91; --color-red-bg: #382626; --color-red-pill: #542f2e; --color-red-pill-text: #ffc8bf; --color-red-icon: #e88a81;
}