/* ===== Токены дизайн-системы =====
 * Источник правды: design-notes/system-v1.1.html («Система безтерапевта.ру», версия 1.1).
 * Значения здесь и только здесь. В правилах пишем var(--…), а не числа и не hex:
 * так за два года и набралось семьсот оттенков на четыре десятка реальных цветов.
 *
 * Файл подключается ПЕРВЫМ, до page.css. Проверка на самодеятельность —
 * node gen/check-tokens.js: он ругается на цвет или радиус вне набора.
 */

:root{
  /* --- База --- */
  --cream:#FFF8E7;          /* фон публичных страниц */
  --ink:#24231F;            /* основной текст */
  --accent:#168AE1;         /* бренд-синий: кнопки, ссылки, активные состояния */

  /* --- Тёмный набор (перенесён с RU 05.08.2026, ТЗ TZ-EN-DARK-THEME п.1).
         Это значения, а не роли: роль ставит тёмную пару через
         html[data-theme="dark"], а берёт значение отсюда. Бренд-синий на
         тёмном не работает текстом — контраст 3.2 при норме 4.5, поэтому у
         акцента отдельные светлые варианты. --- */
  /* Лестница подложек поднята на две ступени 07.08.2026: прежний #10151C
     читался как чёрный экран, а не как тёмная тема. Значения те же, что на
     bezterapevta.ru. */
  --dark-shell:#131820;        /* подложка кабинета, самый нижний слой */
  --dark-bg:#191F28;           /* фон страницы и панелей */
  --dark-surface:#212934;      /* карточка, поднятая поверхность */
  --dark-surface-2:#2A333F;    /* вложенный блок внутри карточки */
  --dark-control:#313B48;      /* поле ввода, кнопка-контрол */
  --dark-ink:#F4EFE3;          /* основной текст */
  --dark-ink-warm:#F1E7D4;     /* текст на публичных страницах, теплее */
  --dark-muted:#B7C1CD;        /* вторичный текст кабинета */
  --dark-muted-cool:#A6AEBA;   /* вторичный текст публичных страниц */
  --dark-faint:#939CAA;        /* подписи: на #7E8794 контраст был 4.15 при норме 4.5 */
  --dark-accent:#61ADE5;       /* акцент кабинета: светлее дневного */
  --dark-accent-2:#4B8CBD;     /* акцент публичных страниц */
  /* Green, not the brand: in dark theme a confirmation must differ from the
     accent, otherwise the colour stops saying anything. Matches the app's
     night toneGood. Contrast on #191F28 — 5.29. */
  --dark-success:#2FA56A;      /* положительное состояние — зелёный */
  --dark-line:rgba(233,240,245,.18);        /* граница на тёмном */
  --dark-line-strong:rgba(233,240,245,.55); /* граница активного поля */
  --dark-tint:rgba(22,138,225,.22);         /* синяя подложка на тёмном */
  /* Подложка под иллюстрации упражнений. Рисунки — чёрный штрих на прозрачном
     фоне, темнеть им некуда: на тёмной подложке они просто исчезают. Поэтому
     светлое пятно здесь не недосмотр, а единственный способ показать рисунок.
     Тон приглушён относительно дневного тинта (#E8F3FC), чтобы карточка не
     светила в тёмной теме белым прямоугольником. */
  --dark-art:#CFD8DF;

  /* --- Восемь семейств. У каждого три ступени:
         база — светлая подложка, mid — средний, dark — насыщенный. --- */
  /* Пересобраны 17.08.2026 под новый бренд, зеркально с RU. Прежний набор
     достался от зелёной поры и был выцветшим: насыщенность 10–30%, из-за чего
     цветные блоки на кремовом читались как оттенки серо-бурого, а не как разные
     темы. Тон каждого семейства — отдельная точка на круге относительно бренда
     (206°), насыщенность 70–80%. Ступень dark идёт цветом текста и даёт не
     меньше 4.6 и на своей базе, и на кремовом фоне страницы. */
  --sage:#E3F1FC;   --sage-mid:#2B8EDA;   --sage-dark:#186EAF;   /* 206° бренд */
  --mist:#E3F4FC;   --mist-mid:#2494CC;   --mist-dark:#1673A2;   /* 200° небесный */
  --mint:#E3F9FC;   --mint-mid:#1E99A9;   --mint-dark:#127987;   /* 187° бирюза */
  --mauve:#EFE3FC;  --mauve-mid:#9A5AE2;  --mauve-dark:#6F1CCE;  /* 268° лаванда */
  --rose:#FCE3EC;   --rose-mid:#E05286;   --rose-dark:#C51B59;   /* 338° розовый */
  --peach:#FCECE3;  --peach-mid:#D96826;  --peach-dark:#AF4F18;  /* 22° коралл */
  --sand:#FCF4E3;   --sand-mid:#B68420;   --sand-dark:#906614;   /* 40° янтарь */
  /* blue держится ближе к бренду: --blue-soft заливает целые секции, и уход в
     сторону дал бы рядом с карточками два спорящих синих. */
  --blue:#1C52CE;   --blue-mid:#5A83E2;   --blue-soft:#E7F0FB;

  /* --- Нейтрали.
         Восьми семейств хватает для поверхностей, но не для текста: система
         описывает только --ink, а на сайте давно живёт тёплая серая шкала —
         подписи в подвале, вторичный текст кабинета, разделители. Эти значения
         не выдуманы сейчас: они уже стоят в общих блоках сотнями объявлений
         (подписи 430 раз, разделитель 212). Записаны здесь, чтобы гейт
         показывал настоящие отклонения, а не ругался на согласованный текст.

         Имена с префиксом neutral, а не привычные --muted и --faint: эти два
         уже объявлены в page.css, но не на всех страницах. Совпади имена — там,
         где var(--muted) до сих пор ни к чему не приводил, текст внезапно
         посветлел бы. Префикс исключает такую подмену. --- */
  --neutral-strong:#2B2926;   /* заголовки и текст кабинета */
  --neutral-soft:#6F675B;     /* вторичный текст, описания */
  --neutral-faint:#8A8071;    /* подписи, мелкие пояснения */
  --neutral-muted:#9A917E;    /* приглушённая подпись поверх фона */
  --neutral-line:#E0D3BA;     /* разделитель на песочном фоне */
  --neutral-surface:#FCF9F2;  /* поверхность карточки на кремовом */

  /* --- Метки рубрик блога (перенос из RU).
         Шестнадцать цветов, по одному на рубрику: читатель узнаёт тему по
         метке, поэтому свести их к восьми семействам нельзя — рубрики
         перестанут различаться. Это отдельный набор со своей задачей, и он
         тоже должен лежать в одном месте, а не в разметке каталога. --- */
  --tag-panic:#B0402C;
  --tag-relations:#A03A68;
  --tag-self-esteem:#6A4C96;
  --tag-body:#0F558A;
  --tag-practice:#2A7590;
  --tag-mood:#8F6316;
  --tag-thoughts:#46549B;
  --tag-work:#6E5A48;
  --tag-skills:#1264A3;
  --tag-distortions:#843A76;
  --tag-life:#A2562A;
  --tag-theory:#5A6685;
  --tag-test:#3A73A8;
  --tag-tool:#666B42;
  --tag-exercise:#146DB0;
  --tag-guide:#3A73A8;

  /* --- Feeling colours (shared palette, colors.pdf — same on both sites).
         One hue per feeling, mid-tone so they read on cream and on dark alike.
         Kept as a named set, not literals in the markup: the dashboard, the tests
         page and the diary all colour the same eleven feelings. --- */
  --feel-anxiety:#1E7FD4;      /* anxiety — blue */
  --feel-sadness:#8C55DE;      /* sadness — muted violet */
  --feel-anger:#D2661C;        /* anger — ochre terracotta */
  --feel-shame:#B935A6;        /* shame — plum */
  --feel-guilt:#8A6A45;        /* guilt — brown */
  --feel-resentment:#D62F6E;   /* resentment — muted magenta */
  --feel-loneliness:#0B9AAE;   /* loneliness — sea */
  --feel-panic:#DC392E;        /* panic — red, the sharpest of the row */
  /* Calm keeps green, not the brand. While the brand was green the link
     worked; after the switch to blue this collided with anxiety #4E718F —
     2° apart in hue, 5% in lightness, one blob in the emotion list. Same green
     as the test result scales: calm and good result are one family of meaning. */
  --feel-calm:#12946B;         /* calm — green, NOT the brand */
  --feel-joy:#B5820A;          /* joy — gold */
  --feel-other:#8B8B86;
  /* Same two feelings the diary asks about but the dashboard chips don't have.
     Kept here so both surfaces paint the same emotion the same way. */
  --feel-fear:#6A5AE0;         /* fear — blue-violet, apart from sadness */
  --feel-irritation:#D97B15;   /* irritation — lighter than anger, same hue */        /* other — neutral */

  /* --- Answer intensity scale.
         Test options are coloured by position: "never" calmer, "nearly every day"
         more alarming.

         The RU site first took consecutive palette values (accent, sage-mid,
         sand-mid, peach-mid) to add no new colours — and on the four-point scale
         used by most tests that came out as two greens and two browns. The steps
         were indistinguishable and the scale stopped reading.

         Same principle as the feeling colours: neighbouring steps differ in tone,
         not in shade. Green, gold, terracotta, red — all four already in the set,
         so the range stays muted. --- */
  --scale-1:var(--feel-calm);    /* calm end: green, as the note below intends */
  --scale-2:var(--feel-joy);     /* gold */
  --scale-3:var(--tag-life);     /* terracotta */
  --scale-4:var(--feel-panic);   /* red: usual end of a four-point scale */
  --scale-5:var(--tag-panic);    /* fifth step, PSS-10 and SAS-SV */
  --scale-6:var(--peach-dark);   /* sixth: SAS-SV only */

  /* --- Site footer. The values sat as hex literals inside footer.css, where the
         token gate never reached them. Sand backdrop a shade deeper than the cream
         of the pages, near-black store buttons, warm grey captions. --- */
  --footer-bg:#FBF7EA;   /* same cream as the cabinet and the home page */
  --footer-store:#211C14;
  --footer-caption:#6F675B;
  --footer-label:#6F675B;

  /* --- Состояния --- */
  --error:#805F56;
  /* Success is green for the same reason: a confirmation in brand blue is
     indistinguishable from ordinary hint text set in the same accent. */
  --success:#1C7A4F;

  /* --- Типографика.
         Шкала из system-v1.1 со сдвигом на ступень: заголовок страницы берёт
         размер Section/H2 (38–58), потому что Display/H1 (50–78) на реальных
         страницах выглядит огромным. Дальше H2 получает размер Card/H3, а H3
         остаётся промежуточным — так иерархия из трёх ступеней сохраняется.
         Веса: Merriweather 300 для заголовков, интерфейсный шрифт 300–500.
         Жирного начертания в системе нет. --- */
  --text-h1:clamp(38px,4vw,50px);     --lh-h1:1.06;
  --text-h2:clamp(22px,3.2vw,27px);   --lh-h2:1.18;
  --text-h3:19px;                     --lh-h3:1.3;
  --text-body:17px;                   --lh-body:1.58;
  --text-small:15px;                  --lh-small:1.5;
  --text-caption:12px;                --tracking-caption:.08em;

  /* --- Раскладка --- */
  --container:1280px;

  /* --- Скругления --- */
  --radius-card:30px;       /* карточка, крупная поверхность */
  --radius-inner:22px;      /* вложенный блок внутри карточки */
  --radius-control:16px;    /* кнопка, поле ввода */
  --radius-small:13px;      /* чип, метка, мелкий элемент */
  --radius-micro:6px;       /* полоска прогресса, насечка, точка */
  --radius-pill:999px;      /* круглые кнопки и пилюли */
  --radius:var(--radius-card);

  /* --- Тени. Три уровня, больше не заводить. --- */
  --shadow-raised:0 24px 70px rgba(22,138,225,.13);   /* поднятая карточка */
  --shadow-soft:0 12px 36px rgba(36,35,31,.08);       /* мягкое отделение от фона */
  --shadow-control:0 10px 26px rgba(22,138,225,.18);  /* кнопка, контрол */
  --shadow:var(--shadow-raised);

  /* Подкрашенная тень: карточки курсов и упражнений роняют тень цветом своей
     темы, а не серым. Приём осмысленный, но записывался каждый раз заново —
     двадцать вариаций одного и того же. Цвет берётся из --c, если он задан
     на карточке, иначе из акцента. */
  --shadow-tinted:0 12px 26px -12px color-mix(in srgb,var(--c,var(--oc,var(--accent))) 70%,transparent);

  /* Кольцо фокуса и выделения. Это не тень поверхности: у неё нет размытия,
     она рисует обводку вокруг элемента. Отдельный токен, чтобы её не путали
     с уровнями теней. */
  --ring-focus:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);

  /* --- Интервалы, шаг 4 px --- */
  --space-micro:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* --- Sections on the home page's second screen (design 10.08.2026) ------
     Six sections are told apart by colour: card background, chip fill and
     button. Values come from the design file; some already existed in the
     palette above and are reused. The chip caption has its own colour — the
     button colour on its own fill falls below the contrast floor. Same set
     lives in bezterapevta.ru/tokens.css. */
  --tool-green-bg:#E8F3FC;  --tool-green-chip:#D5EAFA;  --tool-green-btn:#168AE1;  --tool-green-ink:#105284;
  --tool-violet-bg:#EFECF3; --tool-violet-chip:#E4DCEE; --tool-violet-btn:#695D7C; --tool-violet-ink:#544A64;
  --tool-blue-bg:#E9F0F5;   --tool-blue-chip:#D7E3EC;   --tool-blue-btn:#4E718F;   --tool-blue-ink:#3E5B73;
  --tool-peach-bg:#FFE6D7;  --tool-peach-chip:#F9D7C3;  --tool-peach-btn:#CB7754;  --tool-peach-ink:#9C5535;
  --tool-teal-bg:#D4E8F7;   --tool-teal-chip:#BAD9F0;   --tool-teal-btn:#12629E;   --tool-teal-ink:#0D4977;

  /* --- Движение. Анимация объясняет изменение, а не украшает. --- */
  --duration-fast:160ms;    /* состояния контролов */
  --duration-base:250ms;    /* наведение, смена поверхностей */
  --duration-slow:480ms;    /* тост, шторка, появление блока */
  --ease-standard:cubic-bezier(.2,.8,.2,1);
}

/* Mobile type scale. The previous clamp kept the desktop 38px minimum even
   on a 320px viewport, pushing the first useful content below the fold. */
@media(max-width:720px){
  :root{
    --text-h1:32px;
    --text-h2:26px;
    --text-h3:19px;
    --text-body:16.5px;
    --text-small:14.5px;
  }
}

@media (prefers-reduced-motion:reduce){
  :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; }
}

/* Тёмная тема подвала: те же значения, что на bezterapevta.ru. Без них
   подписи разделов оставались тёплым серым #6F675B и давали 4.07 при норме
   4.5, а сама плашка подвала светилась кремовым. */
html[data-theme="dark"]{
  --footer-bg:#141B25; --footer-store:#1B2431; --footer-caption:#A6AEBA; --footer-label:#A6AEBA;
  --neutral-soft:#A6AEBA; --neutral-faint:#8A93A3; --neutral-muted:#8A93A3;
  --neutral-line:rgba(233,240,245,.16); --neutral-surface:#212934;
}