/* ════════════════════════════════════════════════════════════════════════════
   Токены SoWhite
   Источник: репозиторий нового сайта github.com/Dalu3/sowhite,
   frontend/styles/tokens/foundations.css, typography.css, home-products.css,
   empty-state.css. Перенесено 25.08.2026, сверено с origin/main 46711f4
   15.09.2026 (DESIGN.md, раздел 15). Не Figma-реконструкция.
   Значения даны как есть; алиасы под структуру Mini App — ниже отдельным блоком.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand (из проекта, дословно) ───────────────────────────────────────── */
  --color-brand-100:#e5f7ed;
  --color-brand-200:#d1f0e0;
  --color-brand-300:#b3e6cc;
  --color-brand-400:#92dbb6;
  --color-brand-500:#63cc96;
  --color-brand-600:#458f69;
  --color-brand-700:#377254;
  --color-brand-800:#27503b;
  --color-brand-900:#1b3829;

  /* ── Neutral (из проекта, дословно) ─────────────────────────────────────── */
  --color-neutral-100:#ffffff;
  --color-neutral-200:#f3f5f5;
  --color-neutral-250:#e3e8e9;
  --color-neutral-300:#d9e1e2;
  --color-neutral-400:#bcc9c5;
  --color-neutral-500:#9aada7;
  --color-neutral-600:#bfbfbf;
  --color-neutral-700:#858585;
  --color-neutral-800:#505050;
  --color-neutral-900:#212721;

  /* ── Семантика (алиасы из проекта, дословно) ────────────────────────────── */
  --color-ink:var(--color-neutral-900);
  --color-ink-soft:var(--color-neutral-800);
  --color-ink-muted:var(--color-neutral-700);
  --color-ink-faint:var(--color-neutral-500);
  --color-line:var(--color-neutral-250);
  --color-line-strong:var(--color-neutral-300);
  --color-surface:var(--color-neutral-100);
  --color-surface-muted:var(--color-neutral-200);
  --color-action-primary:var(--color-brand-500);
  --color-action-primary-hover:var(--color-brand-600);
  --color-action-primary-text:var(--color-surface);
  /* Неактивная кнопка — foundations.css сайта, origin/main 46711f4 (14.09.2026) */
  --color-action-disabled:var(--color-neutral-600);
  --color-action-disabled-text:var(--color-surface);
  /* Нейтральная кнопка: в светлой теме — как на сайте (surface-muted, наведение
     line); в тёмной переопределена светлее подложки заметок. */
  --color-action-neutral:var(--color-surface-muted);
  --color-action-neutral-hover:var(--color-line);
  --color-error:#c73c3c;
  --color-error-soft:#fff1f1;
  --color-error-border:#f0c5c5;
  --color-warning:#8f641d;
  --color-warning-soft:#fff7e5;
  --color-warning-border:#ebd39a;
  --color-success:var(--color-brand-700);
  --color-success-soft:var(--color-brand-100);
  --color-success-border:var(--color-brand-300);
  --color-care-danger:#bf2836;
  --color-care-warning:#f2b642;
  --color-care-success:#19764c;
  --color-rating-star:#ddbd03;

  /* ── Компоненты: карточка товара (из home-products.css) ─────────────────
     ВНИМАНИЕ: --card-radius намеренно отличается от проекта.
     В коде home-products-card-radius = 1.25rem; для Mini App выбрано 8px
     по решению дизайнера — на маленьком экране крупный радиус давал
     ощущение, что блоки сливаются. Внутренние элементы — 6px, чтобы
     не спорили с внешним. */
  --card-radius:0.5rem;
  /* Новый светлый Mini App по референсу заказчика (28.09.2026). */
  --miniapp-card-radius:1.25rem;
  --miniapp-card-radius-sm:1rem;
  --miniapp-product-image-radius:var(--miniapp-card-radius-sm);
  --miniapp-thumb-size:3.25rem;
  --miniapp-chevron-size:1rem;
  --miniapp-list-gap:0.75rem;
  --miniapp-pill-height:2.25rem;
  --miniapp-nav-transition-duration:240ms;
  --miniapp-care-action-border-width:0.0625rem;
  --miniapp-script-size:1.5rem;
  --miniapp-screen-title-size:1.5rem;
  --miniapp-product-title-size:1.5rem;
  --miniapp-order-price-size:1.5rem;
  --product-care-note-size:1.25rem;
  --product-care-note-weight:600;
  --radius-inner:0.375rem;
  --card-padding:0.75rem;
  --card-gap:0.625rem;
  --instruction-hero-photo-ratio:1;
  --miniapp-guide-photo-ratio:1.22;
  --miniapp-guide-step-copy-size:0.8125rem;
  --miniapp-guide-note-size:0.875rem;
  --miniapp-guide-note-script-size:1.125rem;
  /* Декоративные размеры таймлайна инструкции — дополнение Mini App. */
  --instruction-visual-size:3.5rem;
  --instruction-icon-size:1.75rem;
  --instruction-outline-width:0.0625rem;
  --badge-radius:var(--radius-inner);
  --badge-padding-block:0.25rem;
  --badge-padding-inline:0.5rem;
  --badge-offset:0.75rem;
  --badge-gap:0.375rem;
  --rating-value-height:1.875rem;
  --rating-value-padding-inline:0.625rem;
  --rating-star-size:1rem;
  --rating-gap:0.5rem;
  --price-box-radius:var(--radius-inner);
  --price-box-padding-block:0.25rem;
  --price-box-padding-inline:0.5rem;
  --price-box-min-height:3.25rem;
  --product-price-min-height:5rem;
  --product-price-discount-width:4.25rem;
  --discount-min-width:3.5rem;
  --discount-height:2rem;
  --discount-padding-inline:0.75rem;
  --discount-offset-inline:0.75rem;
  /* Кнопка в карточке — pill-action.tsx сайта, size="product":
     узкое начертание, 1rem / 1.2, высота 2.75rem. */
  --button-height:2.75rem;
  --button-gap:var(--space-1);
  --button-padding-inline:var(--space-3);
  --button-icon-size:1.25rem;
  --button-font-size:var(--text-body-s);
  --button-line-height:1.2;

  /* Кнопка уровня страницы — size="catalog" и "hero" сайта на мобильном:
     обычная ширина, 1.125rem / 1.3, высота 3.375rem. */
  --button-lg-height:3.375rem;
  --button-lg-gap:0.375rem;
  --button-lg-padding-block:var(--space-4);
  --button-lg-padding-inline:var(--space-8);
  --button-lg-icon-size:1.375rem;
  --button-lg-font-size:var(--text-body-m-desktop);
  --button-lg-line-height:var(--text-body-m-desktop--lh);

  /* Пустое состояние и ошибка — empty-state.css сайта, мобильные значения:
     заголовок h5 по центру, тёмная пилюля по ширине текста. */
  --state-gap:var(--space-6);
  --state-padding-block-start:var(--space-10);
  --state-padding-block-end:var(--space-10);
  --state-title-size:1.25rem;
  --state-title-lh:var(--text-h5-mobile--lh);

  --transition-base:160ms ease;

  /* ── Форма (из проекта, дословно) ───────────────────────────────────────── */
  --radius-xs:0.375rem;
  --radius-sm:0.625rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --radius-xl:1.75rem;
  --radius-2xl:2rem;
  --radius-pill:999rem;

  /* ── Градиенты (из проекта, дословно) ───────────────────────────────────
     Это те самые Color styles, что видны в Figma как green radial /
     light green linear / dark linear. */
  --color-surface-footer:#596561;
  --color-surface-pink-soft:#ffe3f1;
  --color-border-subtle:var(--color-neutral-200);
  --color-action-primary-subtle:var(--color-brand-100);
  --color-action-primary-soft:var(--color-brand-200);
  --color-accent-soft:var(--color-brand-400);

  /* home-care-card-green-background — мягкая мятная карточка.
     Первый стоп — subtle (brand-100), как на сайте; был soft (brand-200). */
  --grad-mint-soft:linear-gradient(137deg,
    var(--color-action-primary-subtle) 1.43%,
    var(--color-accent-soft) 100.66%);
  /* home-safe-enamel-card-background — плотный фирменный блок */
  --grad-brand:linear-gradient(103.05deg,
    var(--color-brand-500) 19.2%,
    var(--color-brand-600) 93.58%);
  /* home-self-care-value-strips-backdrop — радиальный мятный */
  --grad-mint-radial:radial-gradient(ellipse at 6.666% 88.27%,
    var(--color-brand-300) 0.92%,
    var(--color-brand-400) 100%);
  /* Подложка баннера-шапки. В коде такого блока нет — он есть только
     в Figma (страница категории). Собран из существующих токенов. */
  --grad-surface:linear-gradient(103deg,
    var(--color-surface-muted) 0%,
    var(--color-surface) 78%);
  /* Очень лёгкая подложка строк библиотеки инструкций — слева направо. */
  --grad-guide-surface:linear-gradient(90deg,
    var(--color-surface-muted) 0%,
    var(--color-surface) 100%);
  /* Очень светлый серо-белый градиент карточки инструкции слева направо. */
  --grad-instruction-step:linear-gradient(90deg,
    var(--color-neutral-200) 0%,
    var(--color-neutral-100) 100%);
  --instruction-step-ink:var(--color-neutral-900);

  /* Розовый по формуле мятного: 137°, стопы 1.43% и 100.66%, тон → тон.
     В проекте розовый ровно один, поэтому светлый стоп выведен от него
     (#ffe3f1, смешанный с белым пополам). Самая насыщенная точка градиента
     не превышает брендовый --color-surface-pink-soft. */
  --color-surface-pink-lift:#fff1f8;
  --grad-pink:linear-gradient(137deg,
    var(--color-surface-pink-lift) 1.43%,
    var(--color-surface-pink-soft) 100.66%);
  /* Мягкий красный градиент ошибки слева направо. */
  --grad-error-soft:linear-gradient(90deg,
    var(--color-error-border) 1.43%,
    var(--color-error-soft) 100.66%);

  /* Шкала из Figma: мятная дорожка и градиент фирменных зелёных. */
  --progress-track:var(--color-brand-300);
  --grad-progress:linear-gradient(90deg,
    var(--color-brand-500) 0%,
    var(--color-brand-600) 100%);
  --progress-fill:var(--grad-progress);
  --progress-height:0.5rem;
  --progress-transition-duration:500ms;

  /* cart-toast / footer — тёмный */
  --grad-dark:linear-gradient(to bottom,
    var(--color-neutral-900) 0%,
    var(--color-surface-footer) 100%);
  --on-mint:var(--color-brand-900);
  --on-mint-dim:var(--color-brand-800);
  --card-tone-neutral:var(--color-surface-muted);
  --card-tone-pink:var(--color-surface-pink-soft);
  --on-pink:var(--color-ink);
  --on-pink-dim:var(--color-neutral-800);

  /* ── Тени (из проекта, дословно — вот чего не было в Figma-выгрузке) ────── */
  --shadow-soft:0 1.25rem 3.5rem -2.875rem rgb(33 39 33 / 0.2);
  --shadow-card:0 0.5rem 2rem -1.25rem rgb(33 39 33 / 0.14);
  --shadow-pop:0 1.5rem 2.25rem -1.25rem rgb(33 39 33 / 0.34);
  --shadow-card-offset:-0.75rem -0.5rem 1rem rgb(154 173 167 / 0.16);
  /* Тень «парящей» карточки — её носят тонированные карточки в home-care */
  --shadow-card-floating:-0.75rem -2.5rem 1.875rem rgb(156 182 186 / 0.1),
    -1.25rem 2.5rem 1.875rem rgb(156 182 186 / 0.06),
    0.5rem 1.625rem 0.875rem rgb(156 182 186 / 0.09),
    0.75rem 1.25rem 1rem rgb(156 182 186 / 0.09),
    -0.5rem 0.75rem 0.75rem rgb(156 182 186 / 0.09),
    0.0625rem 0.125rem 0.25rem rgb(156 182 186 / 0.08);
  --shadow-card-lifted:var(--shadow-card-offset), var(--shadow-card-s);
  --shadow-card-s:0.0625rem 0.125rem 0.25rem rgb(156 182 186 / 0.1),
    0.125rem 0.375rem 0.4375rem rgb(156 182 186 / 0.09),
    0.3125rem 0.875rem 0.5625rem rgb(156 182 186 / 0.05),
    0.5rem 1.625rem 0.6875rem rgb(156 182 186 / 0.01),
    0.8125rem 2.5rem 0.75rem rgb(156 182 186 / 0);

  /* ── Отступы (из проекта, дословно) ──────────────────────────────────────
     rem привязан к 16px корневого шрифта — так же, как в проекте */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --layout-padding-mobile:0.875rem;
  --layout-page-heading-gap:2rem;

  /* ── Типографика: шрифт (из проекта, дословно) ──────────────────────────── */
  /* Запасное начертание с метриками Fixel — typography.css сайта: пока шрифт
     грузится, текст виден и строки не прыгают при подмене. */
  --font-sans:"Fixel Text", "Fixel Text Fallback", sans-serif;
  --font-handwritten:"Caveat", cursive;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
  --font-weight-black:900;

  /* ── Типографика: мобильная шкала ────────────────────────────────────────
     Исходные уровни шкалы перенесены из проекта; отсутствующий там H4
     добавлен для Mini App как арифметическая середина между H3 и H5.
     Body L/M/S/XS не имеют отдельных мобильных значений в typography.css,
     на мобильном экране используются через --text-base/--text-md алиасы. */
  --text-h1-mobile:2.5rem;      --text-h1-mobile--lh:0.9;  --text-h1-mobile--ls:-0.05rem;
  --text-h2-mobile:1.875rem;    --text-h2-mobile--lh:1;
  --text-h3-mobile:2.5rem;      --text-h3-mobile--lh:1;
  --text-h4-mobile:2.125rem;     --text-h4-mobile--lh:1;
  --text-h5-mobile:1.75rem;     --text-h5-mobile--lh:1;
  --text-h6-mobile:1.125rem;    --text-h6-mobile--lh:1;
  --product-care-status-size:1rem;
  --text-body-m-mobile:1rem;    --text-body-m-mobile--lh:1.2;
  --text-body-xs-mobile:0.875rem; --text-body-xs-mobile--lh:1.2;
  /* Есть только в desktop-части шкалы; мобильного эквивалента проект
     не определяет — см. примечание 5. */
  --text-body-xxs:0.75rem;      --text-body-xxs--lh:1;
  --text-body-s:1rem;           --text-body-s--lh:1.1;
  --text-body-m-desktop:1.125rem; --text-body-m-desktop--lh:1.3;
  --text-admin-identity:1rem; --text-admin-identity--lh:1.25;
  --text-admin-stat:1.5rem; --text-admin-stat--lh:1;

  /* Цены — отдельная ветка шкалы, из home-products.css */
  --text-price-old:var(--text-body-xs-mobile);   --text-price-old--lh:1.1;
  --text-price-label:var(--text-body-m-desktop); --text-price-label--lh:1.2;
  --text-price-current:var(--text-body-m-desktop); --text-price-current--lh:1.2;
  --price-weight:var(--font-weight-medium);

  /* Имя как в проекте: --font-width-fixel-text */
  --font-width-fixel-text:87.5;

  /* ════════════════════════════════════════════════════════════════════════
     Алиасы прототипа Mini App — мостик со старых переменных на новые,
     чтобы не переписывать разметку компонентов заново.
     ════════════════════════════════════════════════════════════════════════ */
  --bg:var(--color-surface);
  --surface:var(--color-surface);
  --surface-2:var(--color-surface-muted);
  --line:var(--color-line);

  --text:var(--color-ink);
  --text-dim:var(--color-ink-soft);
  --text-mute:var(--color-ink-muted);

  --accent:var(--color-action-primary);
  --accent-text:var(--color-action-primary-text);
  --accent-soft:var(--color-brand-100);
  --accent-ink:var(--color-brand-700);
  --accent-100:var(--color-brand-100);
  --accent-900:var(--color-brand-900);

  --danger:var(--color-error);
  --warn:var(--color-warning);

  --radius:var(--radius-2xl);
  --radius-sm:var(--radius-md);
  --pill:var(--radius-pill);
  /* Единая линия контента Mini App: заголовки и внешние края карточек. */
  --miniapp-screen-inset:var(--space-5);
  --pad:var(--miniapp-screen-inset);

  --shadow-card:var(--shadow-card-s);

  /* Имитация Telegram на iPhone, ночная тема: превью рассылки в админке.
     Не цвета бренда и не меняются с темой админки — это чужой интерфейс,
     который оператор должен узнать один в один. Сверено со скриншотом
     iPhone 17.09.2026. */
  --tg-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tg-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --tg-chat-bg:#0b0910;
  --tg-header-bg:#1a1720;
  --tg-divider:#0b080f;
  --tg-bubble-bg:#2b2433;
  --tg-button-bg:#36303d;
  --tg-button-bg-hover:#8e47df;
  --tg-outgoing-bg:#8e47df;
  --tg-text:#f8f7fb;
  --tg-meta:#9b91a5;
  --tg-link:#c2a5ff;
  --tg-code-bg:#1c1722;
  --tg-quote-bar:#a777ee;
  --tg-time-chip-bg:#0b0910b3;
  --tg-date-bg:#302938;
  --tg-date-text:#f8f7fb;
  --tg-wallpaper-dot:#32243d;
  --tg-compose-chip:#3d8bf2;
  --tg-compose-field:#242129;
  --tg-avatar-bg:#cf72ed;
  /* Геометрия эталонного iPhone 14 Plus в логических CSS-пикселях. */
  --tg-frame-width:26.75rem;
  --tg-preview-scale:0.75;
  --tg-text-size:0.875rem;
  --tg-text-lh:1.25rem;
  --tg-meta-size:0.6875rem;
  --tg-title-size:0.875rem;
  --tg-bubble-radius:0.875rem;
  --tg-bubble-tail:0.375rem;
  --tg-bubble-pad-block:0.375rem;
  --tg-bubble-pad-inline:0.75rem;
  --tg-button-radius:0.625rem;
  --tg-button-height:2.5rem;
  --tg-button-gap:0.1875rem;
  --tg-message-max:23.75rem;
  --tg-photo-max:18.75rem;
  --tg-border-width:0.0625rem;
  --tg-nav-height:3.5rem;
  --tg-nav-control-size:2.25rem;
  --tg-composer-height:3.125rem;
}

/* ── Тёмная тема ───────────────────────────────────────────────────────────
   В проекте (frontend) отдельной тёмной темы под сторфронт нет — она нужна
   только тут, потому что Mini App обязана следовать themeParams Telegram
   (раздел 7 ТЗ). Подбор ниже — наш, не из кода; со стороны проекта есть
   только --color-background-dark:#0f1218 и --color-content-inverse:#fcfcfc
   как заготовки для тёмных секций, взяты за основу. */
:root[data-theme="dark"]{
  /* Базовая палитра тёмной темы: вынесены без изменения текущие значения,
     чтобы дальше переиспользовать их вместо повторения литералов. */
  --color-dark-page:#0f1218;
  --color-dark-ink:#fcfcfc;
  --color-dark-surface:#191d24;
  --color-dark-surface-muted:#262b34;
  --color-dark-line:#2c323c;
  --color-dark-control:#333a46;
  --color-dark-control-hover:#3a4250;
  --color-dark-error:#e08d79;
  --color-dark-error-soft:#2a1a1a;
  --color-dark-error-border:#4a2a2a;
  --color-dark-warning:#d6a75c;
  --color-dark-warning-soft:#2a2318;
  --color-dark-warning-border:#4a3d22;
  --color-dark-pink-lift:#241820;
  --color-dark-pink:#2f2029;
  --color-dark-card-pink:#2a1c24;
  --color-dark-pink-ink-dim:#d8b8c8;

  /* Сирі токени проекту перевертаємо, бо компоненти спираються на них напряму.
     --color-ink стає світлим: усе, що було «темною плашкою» (бейдж, пігулка
     рейтингу, кнопка dark), інвертується разом з ним. */
  --color-ink:var(--color-dark-ink);
  /* Поверхні — варіант B (рішення Артёма 15.09.2026): у холодному відтінку
     фону сторінки #0f1218. Раніше картка була зеленуватою neutral-900 #212721
     на синюватому фоні — два відтінки сперечалися. Картка світліша за фон,
     обведення 1.31:1 до картки. */
  --color-surface:var(--color-dark-surface);
  --color-surface-muted:var(--color-dark-surface-muted);
  --color-line:var(--color-dark-line);
  /* Нейтральна кнопка світліша за підкладку заміток: у картці вона має бути
     видна (1.48:1 до картки, 1.64:1 до сторінки; текст 11.16:1). */
  --color-action-neutral:var(--color-dark-control);
  --color-action-neutral-hover:var(--color-dark-control-hover);
  --color-ink-soft:var(--color-neutral-300);
  --color-ink-muted:var(--color-neutral-500);
  --color-ink-faint:var(--color-neutral-600);
  --color-action-primary-text:var(--color-brand-900);
  --color-error-soft:var(--color-dark-error-soft);
  --color-error-border:var(--color-dark-error-border);
  --color-warning-soft:var(--color-dark-warning-soft);
  --color-warning-border:var(--color-dark-warning-border);
  --color-error:var(--color-dark-error);
  --color-warning:var(--color-dark-warning);
  /* В тёмной теме error-soft темнее error-border: сохраняем ход
     градиента от тёмного слева к светлому справа. */
  --grad-error-soft:linear-gradient(90deg,
    var(--color-error-soft) 1.43%,
    var(--color-error-border) 100.66%);
  /* Бейдж «Отримано» і мятні плашки: світле тло brand-100 на темній
     поверхні сліпить, тому тло — brand-900, текст — brand-400. */
  --color-success:var(--color-brand-400);
  --color-success-soft:var(--color-brand-900);
  --color-success-border:var(--color-brand-800);
  --color-care-danger:#ff786b;
  --color-care-warning:#f2b642;
  --color-care-success:#59dda0;
  --color-action-primary-subtle:var(--color-brand-900);
  --color-action-primary-soft:var(--color-brand-800);

  /* Мятна картка темнішає разом з темою — інакше світлий текст
     лягає на світло-мятне тло і зникає. */
  --grad-mint-soft:linear-gradient(137deg,
    var(--color-brand-800) 1.43%,
    var(--color-brand-700) 100.66%);
  --on-mint:var(--color-dark-ink);
  --on-mint-dim:var(--color-brand-200);
  --grad-surface:linear-gradient(103deg,var(--color-surface-muted) 0%, var(--color-surface) 78%);
  /* Строка библиотеки постепенно сливается с фоном страницы. */
  --grad-guide-surface:linear-gradient(90deg,
    var(--color-dark-surface-muted) 0%,
    var(--color-dark-page) 88%,
    var(--color-dark-page) 100%);
  --grad-instruction-step:linear-gradient(90deg,
    var(--color-surface-muted) 0%,
    var(--color-surface) 100%);
  --instruction-step-ink:var(--color-neutral-100);
  --color-surface-pink-lift:var(--color-dark-pink-lift);
  --grad-pink:linear-gradient(137deg,
    var(--color-dark-pink-lift) 1.43%,
    var(--color-dark-pink) 100.66%);
  /* Розовый в тёмной теме — приглушённый сливовый, иначе слепит */
  --card-tone-pink:var(--color-dark-card-pink);
  --on-pink:var(--color-dark-ink);
  --on-pink-dim:var(--color-dark-pink-ink-dim);

  --bg:var(--color-dark-page);
  --surface:var(--color-surface);
  --surface-2:var(--color-surface-muted);
  --line:var(--color-line);

  --text:var(--color-dark-ink);
  --text-dim:var(--color-neutral-400);
  --text-mute:var(--color-neutral-500);

  --accent:var(--color-brand-500);
  --accent-text:var(--color-brand-900);
  --accent-soft:var(--color-brand-900);
  --accent-ink:var(--color-brand-400);
}

/* ════════════════════════════════════════════════════════════════════════════
   Примечания

   1. Палитра совпала с моей прошлой Figma-выгрузкой день в день — расхождений
      нет. Немонотонность neutral-600 (#BFBFBF светлее neutral-500 #9AADA7) —
      подтверждена кодом, это не ошибка чтения SVG. Стоит спросить дизайнера,
      осознанно ли так.

   2. Контраст текста: --color-ink-faint (neutral-500) даёт 2.4:1 к белому,
      --color-ink-muted (neutral-700) — 3.7:1. Оба ниже порога WCAG AA 4.5:1
      для основного текста. В прототипе они используются только для дат и
      счётчиков — крупным текстом их лучше не ставить.

   3. Тени — реальные, из foundations.css. Раньше я их не имел вообще, карточки
      прототипа держались на сером фоне без тени. Теперь --shadow-card задаёт
      настоящую мягкую тень бренда.

   4. Тёмная тема — НЕ из проекта, достройка под требование ТЗ Mini App
      (следование colorScheme Telegram). У сайта тёмного режима нет.
      Утверждена заказчиком 14.09.2026 в цветах фирменного стиля.

   5. Тона карточек — из проекта: home-care-step-card--neutral / --green /
      --pink, последовательность в lib/home.ts чередуется
      (neutral, green, neutral, pink). Розовый #ffe3f1 существует только
      в светлой теме; тёмный эквивалент подобран нами.

   6. В мобильной части шкалы всего два размера основного текста: 1rem и
      0.875rem. Тира для подписей (навигация, бейджи, даты) нет — на десктопе
      он есть, --text-body-xxs-desktop 0.75rem с интерлиньяжем 1. В прототипе
      берём его размер с мобильным интерлиньяжем 1.2, иначе двухстрочные
      подписи слипаются. Это единственное место, где мы отступили от шкалы;
      стоит попросить дизайнера добавить мобильный body-xxs.
   ════════════════════════════════════════════════════════════════════════════ */