/* Токены дизайна: все цвета, размеры, отступы, радиусы и тайминги сайта.
   Источник значений — docs/Визуальный-план-v3.md, раздел 14.2.
   В остальных CSS-файлах только var(--...), чисел и цветов напрямую не пишем.
   Пометка [допущение] — токена нет в плане, добавлен для вёрстки без хардкода. */

:root {
  /* ---------- типографика (раздел 5) ---------- */
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;                            /* [допущение] */
  --fw-semibold: 600;                           /* [допущение] */

  --fs-display: clamp(44px, 6vw + 1rem, 88px);
  --fs-h1: clamp(32px, 4vw + 0.5rem, 56px);
  --fs-h2: clamp(24px, 2vw + 0.75rem, 32px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tab: 15px;                               /* [допущение] вкладки, 12.7 */
  --fs-caption: 12px;
  --fs-score: clamp(32px, 3vw + 1rem, 56px);

  /* межстрочный и разрядка к шкале (таблица 5.2) [допущение: токены] */
  --lh-display: 1.02;  --ls-display: -0.035em;
  --lh-h1: 1.06;       --ls-h1: -0.03em;
  --lh-h2: 1.15;       --ls-h2: -0.02em;
  --lh-h3: 1.2;        --ls-h3: -0.015em;
  --lh-h4: 1.25;       --ls-h4: -0.01em;
  --lh-lead: 1.55;
  --lh-body: 1.5;
  --lh-small: 1.45;
  --lh-caption: 1.4;   --ls-caption: 0.01em;
  --ls-score: -0.03em;
  --measure: 68ch;                              /* длина строки текста */

  /* ---------- форма (раздел 6) ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-round: 50%;

  /* рамки только из 6.2 [допущение: токены] */
  --border: 1px;                                /* поле ввода, разделители */
  --border-strong: 2px;                         /* фокус, активная вкладка */
  --focus-offset: 2px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-gap: clamp(64px, 8vw, 128px);
  --gap-tight: 12px;                            /* между карточками одной композиции */

  --container: 1200px;
  --gutter: 16px;                               /* поля контейнера, 6.4 */
  --auth-width: 420px;                          /* карточка входа и регистрации, 13 */
  --quiz-width: 640px;                          /* блок вопроса теста, 12.12 */
  /* тест: постоянная высота карточки (план дизайна теста v2, 2.4) [допущение: токены] */
  --quiz-scene-lines: 2;                        /* сцена: место на две строки; от 768 px (карточка 640 px) — одна, pages.css */
  --quiz-plate-lines: 3;                        /* плитка — под самое длинное занятие банка (70 знаков) */
  /* маршрут прогресса теста (план дизайна теста v2, 3.1) [допущение: токены] */
  --route-line: 1.75px;
  --route-dash: 3 7;                            /* пунктир пути впереди */
  --route-stop: 7px;                            /* остановка: круг радиусом 3.5 */
  --route-stop-line: 1.5px;
  --route-mark: 24px;                           /* ромб с кругом на конце, как знак логотипа */
  --route-compact-h: 24px;                      /* компактный маршрут до 1024 px */
  --route-mark-compact: 16px;
  /* фигуры пары на тесте (план дизайна теста v2, 4.2) [допущение: токены] */
  --qfig-phone: 72px;                           /* до 1024 px — ближняя для телефона (64–80) */
  --qfig-reach: 240px;                          /* дальше от карточки фигура не уходит даже на широком экране */
  --exams-width: 560px;                         /* карточка ввода баллов ЕГЭ [допущение, промт подбора 4.3] */
  --exam-input: 88px;                           /* узкое поле балла: «100» и запас на отступы */

  /* размеры элементов управления (12.4, 12.6, 6.4) [допущение: токены] */
  --control-h: 40px;
  --control-h-lg: 48px;
  --field-h: 44px;
  --icon-btn: 44px;                             /* 40 от 600 px */
  --icon-size: 20px;
  --tip-arrow: 12px;                            /* [допущение] сторона квадрата-стрелки подсказки шапки */
  --stat-min: 120px;                            /* ширина колонки числа с подписью (.stats) [допущение] */
  --chance-size: 12px;                          /* значок группы шансов: круг, половина, контур [допущение] */
  --icon-stroke: 1.75;                          /* линия значков интерфейса, 12.17 */
  --tap: 44px;                                  /* минимальная область нажатия */
  --header-h: 56px;                             /* 64 от 600 px */
  --header-offset: 8px;                         /* отступ «парящей» шапки, 12.2 */

  /* внутренние отступы компонентов (12.1, 12.4, 12.6, 12.8, 12.14) [допущение: токены] */
  --btn-pad-y: 10px;
  --btn-pad-x: 18px;
  --btn-pad-y-lg: 12px;
  --btn-pad-x-lg: 22px;
  --field-pad-y: 10px;
  --field-pad-x: 14px;
  --tag-pad-y: 4px;
  --tag-pad-x: 10px;
  --card-pad: 20px;                             /* 24 от 600 px */
  --comment-pad-y: 18px;
  --comment-pad-x: 20px;
  --checkbox-size: 20px;
  --error-icon: 16px;                           /* «!» в круге у ошибки */
  --avatar: 32px;                               /* аватар-буква, 12.14 */
  --dot: 8px;                                   /* точка области в списке, 12.9 */
  --map-pin: 28px;                              /* метка вуза на карте [допущение] */
  --map-pin-dot: 10px;                          /* точка внутри метки [допущение] */

  /* графики (10.2) [допущение: токены] */
  --chart-line: 2px;
  --chart-dot: 3.5px;
  --chart-dash: 4 4;                            /* пунктир платного */
  --chart-h: 180px;                             /* высота полного графика [допущение] */
  --chart-mini-h: 48px;                         /* высота мини-графика */
  --bar-h: 6px;                                 /* полоса результата теста */

  /* новости вуза: минимальная высота карточки по типу (от 600 px) [допущение] */
  --news-h-lead: 300px;
  --news-h-column: 300px;
  --news-h-note: 120px;
  --news-h-middle: 180px;
  --news-h-step: 24px;                          /* прибавка вариантов: s +0, m +1 шаг, l +2 шага */

  /* движение: величины (11.3) [допущение: токены] */
  --press-scale: .98;
  --lift: -2px;                                 /* подъём карточки при наведении */
  --reveal-shift: 16px;                         /* всплытие блоков */
  --step-shift: 16px;                           /* смена вопроса теста */
  --pick-dim: .3;                               /* невыбранная плитка в тесте гаснет до .3 (план дизайна теста v2, 5) */
  --pick-half: .5;                              /* «Не могу выбрать»: обе плитки до .5 */

  --glass-blur: 13px;

  /* ---------- движение (раздел 11) ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-float: ease-in-out;
  --dur-press: 100ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-step: 220ms;
  --dur-tip-wait: 500ms;                        /* [допущение] пауза перед подсказкой шапки: не мигает при проходе курсора */
  --dur-tip: 280ms;                             /* [допущение] появление подсказки шапки */
  --dur-slow: 400ms;
  --dur-reveal: 500ms;
  --dur-draw: 800ms;
  --dur-route: 600ms;                           /* дорисовка маршрута теста (план дизайна теста v2, 3.3) [допущение] */
  --dur-fig-move: 1000ms;                       /* переезд фигур пары теста (план дизайна теста v2, 4.3) [допущение] */
  --dur-pick: 120ms;                            /* отклик выбора в тесте (план дизайна теста v2, 5) [допущение: токен] */
  --stagger-pair: 50ms;                         /* вторая плитка нового вопроса приходит с задержкой [допущение: токен] */
  --quiz-settle: 150ms;                         /* ответ раньше этого после вставки вопроса не принимается (Глеб, 04.10) */
  --stagger: 60ms;                              /* шаг очереди: пункты меню, всплытие */
  --stagger-bars: 90ms;                         /* шаг полос и строк результата */

  /* ---------- фигуры (9.3, 9.4) ---------- */
  /* размер по глубине: телефон, от 600 px — планшет, от 1024 px — десктоп.
     Гигантская — верх диапазона 9.3: середина была мелкой (решение Глеба, 02.10.2026) */
  --fig-giant: 320px;
  --fig-near: 72px;
  --fig-mid: 52px;
  --fig-far: 36px;
  --fig-first-screen: 480px;                    /* ниже — слоты обычных фигур, выше заголовок первого экрана [допущение] */
  --fig-giant-stroke: 1.5px;                    /* гигантские: толщина в пикселях */
  --fig-giant-visible: 0.7;                     /* видимая доля гигантской у края экрана (было 0.5) */
  --fig-draw-wait: 1200ms;                      /* прорисовка не началась — гигантская проявляется сама [допущение] */
  /* цикл плавания по глубине (середина диапазона) */
  --float-giant: 29s;
  --float-near: 15s;
  --float-mid: 17.5s;
  --float-far: 20.5s;
  /* амплитуда плавания */
  --float-x: 18px;
  --float-y: -14px;
  --float-rot-from: -2deg;
  --float-rot-to: 3deg;
  --float-giant-x: 10px;
  --float-giant-y: -8px;
  --float-giant-rot-from: -1deg;
  --float-giant-rot-to: 1.5deg;
  /* «тихие» страницы: плавание на 30% медленнее */
  --quiet-slow: 1.3;
  /* Параллакс (11.4): насколько фигура отстаёт от прокрутки, доля scrollY.
     Фигуры лежат за контентом, поэтому дальние отстают сильнее ближних.
     [допущение: в 9.3 коэффициенты 0.05 / 0.10 / 0.20 / 0.30 идут от гигантской к ближней,
     то есть ближние отставали бы сильнее; план просит подобрать знак и величину глазами.
     Ближняя, средняя и дальняя — как в этапе A; гигантская — самая дальняя] */
  --parallax-near: 0.10;
  --parallax-mid: 0.20;
  --parallax-far: 0.30;
  --parallax-giant: 0.35;
  /* проверочная страница фигур (9.2): размеры 40, 88 и 400 px */
  --fig-check-sm: 40px;
  --fig-check-lg: 88px;
  --fig-check-cell: 240px;

  /* ---------- зерно (8.1) ---------- */
  --grain-size: 180px;

  /* ---------- слои (раздел 2) ---------- */
  --z-grain: 0;                                 /* [допущение] зерно на body::before */
  --z-page: 1;                                  /* [допущение] .page над зерном */
  --z-figures: 0;
  --z-content: 1;
  --z-header: 50;
  --z-nav: 100;
  --z-toast: 200;
}

/* Базовые значения выше — для телефона. Планшет и десктоп (6.4, 9.3, 12) */
@media (min-width: 600px) {
  :root {
    --gutter: 24px; --icon-btn: 40px; --header-h: 64px; --card-pad: 24px;
    --fig-giant: 520px; --fig-near: 100px; --fig-mid: 72px; --fig-far: 48px;
  }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --fig-giant: 640px; }
}

/* ---------- тёмная тема (по умолчанию) ---------- */
/* :root здесь — запасной вариант, если data-theme не пришёл с сервера */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0F0F;
  --surface-1: #151515;
  --surface-2: #191919;
  --surface-3: #1F1F1F;
  --surface-4: #242424;                         /* [допущение] наведение на кнопку на surface-3 (раньше брали --line) */
  --surface-5: #292929;                         /* [допущение] наведение на кнопку в главной карточке под курсором */
  --divider: rgba(255, 255, 255, 0.10);
  --line: #3A3A3A;
  --line-strong: #7A7A7A;
  --text: #E2E2DF;
  --text-2: #A3A3A0;
  --text-3: #8E8E8B;
  --accent: #E2E2DF;
  --accent-hover: #EFEFEC;
  --on-accent: #0F0F0F;
  --focus: #E2E2DF;
  --danger: #EE9A9A;
  --danger-hover: #F2B4B4;                      /* [допущение] наведение на опасную главную кнопку */
  --on-danger: #0F0F0F;                         /* [допущение] текст на заливке --danger */
  --field-bg: #151515;
  --glass-bg: rgba(21, 21, 21, 0.54);
  --glass-bg-hover: rgba(25, 25, 25, 0.66);
  --glass-fallback: rgba(21, 21, 21, 0.92);
  --grain-opacity: 0.0175;                      /* приглушён: на чёрном шум громче (размах в L* 0.53, было 0.66 при 0.02) */
  --fig-op-giant: 0.10;                         /* было 0.07: на экране почти не видно (Глеб, 02.10) */
  --fig-op-near: 0.31;                          /* было 0.30: чуть ярче (03.10) */
  --fig-op-mid: 0.23;                           /* было 0.22 */
  --fig-op-far: 0.17;                           /* было 0.16 */
  /* маршрут прогресса теста: свои токены, ярче фигур (Глеб, 04.10) */
  --route-op: 0.42;                             /* пройденная часть и пройденные остановки */
  --route-op-ahead: 0.16;                       /* пунктир впереди, непройденные остановки, ромб до финиша */

  --c-investigative: #8EC5F0; --c-investigative-tint: rgba(142, 197, 240, 0.14); --c-investigative-ink: #8EC5F0;
  --c-realistic:     #F2B49B; --c-realistic-tint:     rgba(242, 180, 155, 0.14); --c-realistic-ink:     #F2B49B;
  --c-artistic:      #B9A8F2; --c-artistic-tint:      rgba(185, 168, 242, 0.14); --c-artistic-ink:      #B9A8F2;
  --c-social:        #EDA8C4; --c-social-tint:        rgba(237, 168, 196, 0.14); --c-social-ink:        #EDA8C4;
  --c-enterprising:  #EBCB8B; --c-enterprising-tint:  rgba(235, 203, 139, 0.14); --c-enterprising-ink:  #EBCB8B;
  --c-conventional:  #8FD6B8; --c-conventional-tint:  rgba(143, 214, 184, 0.14); --c-conventional-ink:  #8FD6B8;
}

/* ---------- светлая тема ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F1F1EE;
  /* ступени шире, чем у тёмной: на светлом фоне шаг ~1.09:1 не виден (03.10) */
  --surface-1: #E6E6E4;                         /* было #ECECE8 */
  --surface-2: #DBDBD9;                         /* было #E3E3DE */
  --surface-3: #CFCFCD;                         /* было #D9D9D3 */
  --surface-4: #C3C3C1;                         /* [допущение] на ступень темнее surface-3 */
  --surface-5: #B7B7B5;                         /* [допущение] на ступень темнее surface-4 */
  --divider: rgba(0, 0, 0, 0.10);               /* было 0.07 */
  --line: #A8A8A4;                              /* было #CFCFCA; рамка поля 1.67:1 к surface-1 */
  --line-strong: #62625F;                       /* было #A1A1AA; ≥ 3:1 на bg и surface-1…3: пунктир, рамка чекбокса */
  --text: #1E1E1D;
  --text-2: #484846;                            /* было #5F5F66; ≥ 4.5:1 на surface-3 и стекле */
  --text-3: #50504E;                            /* было #6B6B73 */
  --accent: #1E1E1D;
  --accent-hover: #0F0F0F;
  --on-accent: #F4F4F1;
  --focus: #1E1E1D;
  --danger: #933333;                            /* было #C04A4A; ≥ 4.5:1 на bg, surface-1…3 и стекле */
  --danger-hover: #802C2C;                      /* [допущение] */
  --on-danger: #F4F4F1;                         /* [допущение] */
  --field-bg: var(--surface-1);                /* было #FFFFFF: поле как в тёмной, держится на рамке */
  --glass-bg: rgba(230, 230, 228, 0.62);        /* было rgba(226, 226, 222, 0.54) */
  --glass-bg-hover: rgba(219, 219, 217, 0.72);  /* было rgba(218, 218, 213, 0.66) */
  --glass-fallback: rgba(230, 230, 228, 0.95);  /* было rgba(232, 232, 228, 0.94) */
  --grain-opacity: 0.02;                        /* усилен: размах в L* 0.60 (было 0.50 при 0.015); в паре с тёмной шум на глаз одинаков */
  /* фигуры здесь красятся тёмным --c-ink (layers.css), прозрачности выше тёмной темы (03.10) */
  --fig-op-giant: 0.13;                         /* было 0.09; 0.13 — заметность как у тёмной темы */
  --fig-op-near: 0.39;                          /* было 0.30 */
  --fig-op-mid: 0.30;                           /* было 0.22 */
  --fig-op-far: 0.22;                           /* было 0.16 */
  --route-op: 0.53;                             /* пропорционально тёмной теме: 0.39 × 0.42 / 0.31 */
  --route-op-ahead: 0.21;                       /* 0.13 × 0.16 / 0.10 */

  /* подложка полупрозрачная, как в тёмной: всегда на ступень темнее своей поверхности, с оттенком.
     ink — тёмный вариант того же оттенка: ≥ 4.5:1 на подложке поверх surface-1…3.
     Цвет (точки, графики, полосы) ≥ 3:1 к surface-1; оттенки прежние, сдвинута только светлота (03.10) */
  --c-investigative: #4A86C2; --c-investigative-tint: rgba(74, 134, 194, 0.18); --c-investigative-ink: #234F7B;
  --c-realistic:     #C46A4B; --c-realistic-tint:     rgba(196, 106, 75, 0.18); --c-realistic-ink:     #743E28;
  --c-artistic:      #8A72D6; --c-artistic-tint:      rgba(138, 114, 214, 0.18); --c-artistic-ink:      #523E96;
  --c-social:        #C2658E; --c-social-tint:        rgba(194, 101, 142, 0.18); --c-social-ink:        #7B3655;
  --c-enterprising:  #A07D29; --c-enterprising-tint:  rgba(160, 125, 41, 0.18); --c-enterprising-ink:  #624A10;
  --c-conventional:  #39916E; --c-conventional-tint:  rgba(57, 145, 110, 0.18); --c-conventional-ink:  #1D5740;
}

/* класс темы на элементе: дальше компоненты берут --c, --c-tint, --c-ink (4.4).
   Ставит фильтр type_class (apps/recs/templatetags/recs_tags.py): цвет типа есть везде, серого нет */
.c--investigative { --c: var(--c-investigative); --c-tint: var(--c-investigative-tint); --c-ink: var(--c-investigative-ink); }
.c--realistic     { --c: var(--c-realistic);     --c-tint: var(--c-realistic-tint);     --c-ink: var(--c-realistic-ink); }
.c--artistic      { --c: var(--c-artistic);      --c-tint: var(--c-artistic-tint);      --c-ink: var(--c-artistic-ink); }
.c--social        { --c: var(--c-social);        --c-tint: var(--c-social-tint);        --c-ink: var(--c-social-ink); }
.c--enterprising  { --c: var(--c-enterprising);  --c-tint: var(--c-enterprising-tint);  --c-ink: var(--c-enterprising-ink); }
.c--conventional  { --c: var(--c-conventional);  --c-tint: var(--c-conventional-tint);  --c-ink: var(--c-conventional-ink); }