/* portal/styles/tokens.css — ЕДИНАЯ система стиля Портала. У-4.
   ТЗ-ПОРТАЛ.md §1.2 (визуальный каркас), §1.3 (структура кода), §0.5 п.3 (темы).

   ── Что здесь изменилось и почему
   До этой правки на одном пути человека жили ЧЕТЫРЕ независимые палитры:
   тёмное старое приложение (web/css/app.css), золотая бумага кабинета (этот
   файл), лиловая карта (orbit-light.css) и фиолетовый космос анкеты и финала
   (onboarding.css, FinalScreen.css — каждый со своей копией одних и тех же
   значений). Они стыковались встык на одном экране, а стартовая тема прыгала
   с dark на light посреди воронки. Теперь набор один, и он здесь.

   ── Как устроено
   1. ОБЩЕЕ — шрифтовые стеки, типографическая лесенка, радиусы, движение,
      алый ТЖС. Не зависит ни от семейства, ни от темы (кроме алого).
   2. ДВА ИМЕНОВАННЫХ СЕМЕЙСТВА, объявленные ОДНОВРЕМЕННО:
      --paper-*  — тёплая бумага кабинета  («Кабинет-экстренная-кнопка.html»);
      --cosmos-* — фиолетовый космос карты и финалов
      --sand-*   — бежево-золотое семейство анкеты (брендбук)
                   («Анкета-перед-чатом.html», «Финал-пробного-2.html»,
                    «Карта-систем-2-светлая.html»).
      Оба семейства доступны на любом экране — поэтому лиловая карта может
      жить внутри золотого кабинета, не проливая свою палитру наружу.
   3. ЗЕМЛЯ — одна на весь Портал (--ground). Именно её человек видит как
      «фон страницы», и она не меняется при переходе между экранами: это и
      был главный стык, который замечал глаз. Семейство космоса рисует
      карточки, орбиты и акценты, но не перекрашивает землю под ними.
   4. ВЫБОР СЕМЕЙСТВА — атрибутом data-палитра="paper|cosmos|sand" на корне
      документа (или на любом узле: семейство можно включить локально).
      Экран не переопределяет цвета у себя — он называет семейство.

   ── Про алый (единственное красное пятно интерфейса, §1.2, §3.2, П3-6)
   Литералы алого объявлены ТОЛЬКО в блоке --acute-* ниже, и читают их ровно
   три файла: components/AcuteButton, components/AcuteDialog,
   routes/cabinet/acute. Значения приведены к утверждённому макету Дениса —
   #c0442a и #e2603f. Прежний красный был нормировкой ТЗ §1.2 и расходился
   с макетом: открытые рядом, портал и макет показывали два разных красных.
   Литерала того цвета в Портале не осталось нигде, включая комментарии, —
   иначе он вернётся копированием.
   Третьего красного не введено. Раскладка внутри пары выбрана по читаемости,
   а не по теме, потому что это кнопка спасения:
     • заливка — всегда глубокий #c0442a под белым текстом (контраст 5,1 : 1,
       AA для обычного текста), одинаковая в светлой и тёмной теме: кнопка
       ТЖС обязана выглядеть одинаково везде, её узнают по виду;
     • «чернила» (контурная кнопка, заголовок модалки) — #c0442a на светлой
       земле (4,5 : 1) и #e2603f на тёмной (5,6 : 1);
     • наведение затемняет заливку, а не осветляет: осветлённый алый под
       белым текстом падает до 3,3 : 1 и на hover кнопка становилась хуже
       читаемой, чем в покое.
   Прозрачности --acute-dim / --acute-edge — из макета дословно. */

/* ════ 1. ОБЩЕЕ ═══════════════════════════════════════════════════════════ */

:root {
  /* Шрифты — самохост, объявлены в styles/fonts.css. Стеки на случай,
     когда файл ещё не доехал: текст читается сразу, а не после сети. */
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-text: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Типографическая лесенка. Значения — из утверждённых экранов, сведённые
     в один ряд: до этого каждый экран нёс свои размеры в собственном файле. */
  --step-kicker: 10px;          /* надпись над заголовком, вразрядку        */
  --track-kicker: .34em;
  --step-xs: 12px;
  --step-sm: 12.5px;
  --step-base: 15px;            /* основной текст                          */
  --step-md: 16.5px;            /* реплика, крупный ввод                   */
  --step-h3: 17px;
  --step-lg: 19px;
  --step-h2: 20px;
  --step-h1: clamp(22px, 4.2vw, 30px);
  --line-body: 1.6;
  --line-tight: 1.12;

  /* Радиусы. --r — имя из утверждённых экранов космоса, оставлено как есть,
     чтобы вёрстка Дениса не правилась ради переименования. */
  --radius: 14px;
  --radius-lg: 18px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --r: 18px;

  /* Движение. Одна длительность и одна кривая на весь Портал. */
  --dur-fast: .16s;
  --dur: .24s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Уважение к системной настройке: анимации выключены, а не ускорены. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; }
}

/* ════ 2. ДВА СЕМЕЙСТВА. Светлая тема — база (старт светлый, §0.5 п.3) ════ */

:root {
  /* ── paper: тёплая бумага кабинета ─────────────────────────────────── */
  --paper-bg: #f7f3ea;
  --paper-panel: #fffdf8;
  --paper-panel-2: #f1ebdd;
  --paper-line: #e3dbc9;
  --paper-fg: #1d1c19;
  --paper-fg-dim: #6d675c;
  --paper-fg-mute: #948d80;
  --paper-accent: #b8873a;          /* «золото»                            */
  --paper-ember: #b8432a;           /* ошибка найдена — НЕ алый ТЖС        */
  --paper-accent-soft: #d9b273;
  --paper-accent-dim: rgba(184, 135, 58, .12);
  --paper-ok: #3d8a68;

  /* ── cosmos: астрономический атлас карты, анкеты и финалов ─────────── */
  --cosmos-deep: #fbf9fe;
  --cosmos-panel: #ffffff;
  --cosmos-edge: rgba(58, 36, 94, .16);
  --cosmos-edge-2: rgba(58, 36, 94, .3);
  --cosmos-edge-soft: rgba(58, 36, 94, .1);
  --cosmos-fg: #241a35;
  --cosmos-fg-dim: #5f5379;
  --cosmos-fg-mute: #8d83a3;
  --cosmos-accent: #7a45c9;         /* «плазма»                            */
  --cosmos-amber: #b8791b;          /* «Я», в работе                       */
  --cosmos-jade: #1f8a63;           /* разобрано                           */
  --cosmos-ember: #cf4a2b;          /* ошибка найдена — НЕ алый ТЖС        */
  --cosmos-tint: rgba(122, 69, 201, .05);
  --cosmos-tint-2: rgba(122, 69, 201, .1);
  --cosmos-tint-3: rgba(122, 69, 201, .3);
  --cosmos-row-bg: #ffffff;
  --cosmos-grain: .28;
  --cosmos-sky: none;
  --cosmos-wash:
    radial-gradient(120% 90% at 50% 0%, rgba(122, 69, 201, .08), transparent 62%),
    linear-gradient(180deg, #fdfcff, #f4f0fa);
  --cosmos-face-bg: linear-gradient(180deg, #ffffff, #f7f4fc);
  --cosmos-core-shadow: 0 10px 30px -10px rgba(184, 121, 27, .55);
  --cosmos-glow-done: 0 6px 18px -8px rgba(31, 138, 99, .55);
  --cosmos-pane-shadow: 0 14px 34px -22px rgba(36, 26, 53, .5);
  --cosmos-pane-blur: none;

  /* ── sand: бежево-золотое семейство анкеты ─────────────────────────
     Цвета — из брендбука академии, страница «Главный сайт»: графит #636363,
     золото #CEA573, бежевый #FCE7C7. Заведено отдельным семейством, а не
     правкой cosmos: фиолетовая палитра остаётся у карты и финалов, где она
     утверждена, и экран по-прежнему называет семейство, а не красит себя. */
  --sand-deep: #fffdf8;
  --sand-panel: #ffffff;
  --sand-edge: rgba(99, 99, 99, .18);
  --sand-edge-2: rgba(99, 99, 99, .32);
  --sand-edge-soft: rgba(99, 99, 99, .1);
  --sand-fg: #262626;               /* тёмный графит брендбука             */
  --sand-fg-dim: #6d675c;
  --sand-fg-mute: #948d80;
  --sand-accent: #b8873a;           /* золото насыщенное — ссылки, акценты */
  --sand-amber: #cea573;            /* золото брендбука — «Я», в работе    */
  --sand-jade: #3d8a68;             /* разобрано — зелёный остаётся        */
  --sand-ember: #cf4a2b;            /* ошибка найдена — НЕ алый ТЖС        */
  --sand-tint: rgba(206, 165, 115, .06);
  --sand-tint-2: rgba(206, 165, 115, .12);
  --sand-tint-3: rgba(206, 165, 115, .32);
  --sand-row-bg: #ffffff;
  --sand-grain: .16;
  --sand-sky: none;
  --sand-wash:
    radial-gradient(120% 90% at 50% 0%, rgba(252, 231, 199, .55), transparent 64%),
    linear-gradient(180deg, #fffdf9, #faf4ea);
  --sand-face-bg: linear-gradient(180deg, #ffffff, #fbf6ee);
  --sand-core-shadow: 0 10px 30px -10px rgba(184, 135, 58, .5);
  --sand-glow-done: 0 6px 18px -8px rgba(61, 138, 104, .5);
  --sand-pane-shadow: 0 14px 34px -22px rgba(38, 38, 38, .38);
  --sand-pane-blur: none;

  /* ── АЛЫЙ ТЖС. Единственное место с литералами красного. ──────────── */
  --acute-bg: #c0442a;              /* заливка, одинакова в обеих темах    */
  --acute-text: #ffffff;            /* текст на заливке                    */
  --acute-soft: color-mix(in srgb, #c0442a 86%, #000);  /* наведение       */
  --acute-ink: #c0442a;             /* алый как цвет текста и обводки      */
  --acute-dim: rgba(192, 68, 42, .09);
  --acute-edge: rgba(192, 68, 42, .45);
}

/* ── Тёмная тема: те же два семейства, ночные значения ──────────────── */
:root[data-theme="dark"] {
  --paper-bg: #14161a;
  --paper-panel: #1b1e23;
  --paper-panel-2: #212429;
  --paper-line: #2c3138;
  --paper-fg: #f3f0ea;
  --paper-fg-dim: #9aa1ac;
  --paper-fg-mute: #6b727d;
  --paper-accent: #d4a95f;
  --paper-ember: #e37a58;           /* светлее: палитра paper на тёмном фоне */
  --paper-accent-soft: #e3c893;
  --paper-accent-dim: rgba(212, 169, 95, .14);
  --paper-ok: #4fa77f;

  --sand-deep: #16130e;
  --sand-panel: rgba(32, 27, 20, .7);
  --sand-edge: rgba(206, 165, 115, .18);
  --sand-edge-2: rgba(206, 165, 115, .34);
  --sand-edge-soft: rgba(206, 165, 115, .1);
  --sand-fg: #f3f0ea;
  --sand-fg-dim: #b3aa9a;
  --sand-fg-mute: #837b6d;
  --sand-accent: #d4a95f;
  --sand-amber: #e3c893;
  --sand-jade: #4fa77f;
  --sand-ember: #ff7a59;
  --sand-tint: rgba(206, 165, 115, .08);
  --sand-tint-2: rgba(206, 165, 115, .14);
  --sand-tint-3: rgba(206, 165, 115, .36);
  --sand-row-bg: rgba(20, 17, 12, .45);
  --sand-grain: .32;
  --sand-sky: none;
  --sand-wash:
    radial-gradient(120% 90% at 50% 0%, rgba(206, 165, 115, .1), transparent 62%),
    linear-gradient(180deg, #1a1610, #131009);
  --sand-face-bg: linear-gradient(180deg, #221d15, #1a160f);
  --sand-core-shadow: 0 10px 30px -10px rgba(227, 200, 147, .45);
  --sand-glow-done: 0 6px 18px -8px rgba(79, 167, 127, .5);
  --sand-pane-shadow: 0 14px 34px -22px rgba(0, 0, 0, .6);
  --sand-pane-blur: none;

  --cosmos-deep: #130c22;
  --cosmos-panel: rgba(28, 18, 48, .62);
  --cosmos-edge: rgba(185, 140, 255, .16);
  --cosmos-edge-2: rgba(185, 140, 255, .32);
  --cosmos-edge-soft: rgba(185, 140, 255, .1);
  --cosmos-fg: #ede7f5;
  --cosmos-fg-dim: #a99bc4;
  --cosmos-fg-mute: #6f6489;
  --cosmos-accent: #b98cff;
  --cosmos-amber: #f2b45c;
  --cosmos-jade: #4fd6a5;
  --cosmos-ember: #ff7a59;
  --cosmos-tint: rgba(185, 140, 255, .07);
  --cosmos-tint-2: rgba(185, 140, 255, .12);
  --cosmos-tint-3: rgba(185, 140, 255, .35);
  --cosmos-row-bg: rgba(11, 7, 20, .42);
  --cosmos-grain: .5;
  --cosmos-sky:
    radial-gradient(1.5px 1.5px at 14% 16%, rgba(237, 231, 245, .28), transparent),
    radial-gradient(1.4px 1.4px at 80% 12%, rgba(237, 231, 245, .20), transparent),
    radial-gradient(1.6px 1.6px at 88% 66%, rgba(185, 140, 255, .28), transparent);
  --cosmos-wash:
    radial-gradient(120% 90% at 50% 0%, rgba(185, 140, 255, .13), transparent 60%),
    linear-gradient(180deg, #130c22, #0b0714);
  --cosmos-face-bg:
    radial-gradient(70% 70% at 50% 30%, rgba(28, 18, 48, .92), rgba(11, 7, 20, .9));
  --cosmos-core-shadow: 0 0 60px -10px rgba(242, 180, 92, .5);
  --cosmos-glow-done: 0 0 26px -6px rgba(79, 214, 165, .55);
  --cosmos-pane-shadow: none;
  --cosmos-pane-blur: blur(14px);

  --acute-ink: #e2603f;             /* на тёмной земле читается лучше      */
  --acute-dim: rgba(226, 96, 63, .14);
  --acute-edge: rgba(226, 96, 63, .5);
}

/* ════ 3. ЗЕМЛЯ — одна на весь Портал ════════════════════════════════════
   Фон страницы не меняется при переходе S0 → S1 → S2 → S3: это и есть
   «связность глазом». Семейство космоса живёт на карточках, орбитах и
   акцентах, а не на земле под ними. Одна строка на откат, если понадобится
   вернуть каждому экрану свой фон. */
:root { --ground: var(--paper-bg); }

/* ════ 4. СЕМЕЙСТВО ВЫБИРАЕТ ЭКРАН ═══════════════════════════════════════
   Семантические имена (--bg, --fg, --panel, …) — то, чем пользуется вёрстка.
   Ниже они назначаются на одно из двух семейств. Имена --void, --deep,
   --edge, --plasma, --amber, --jade, --ember, --tint*, --wash, --sky,
   --grain, --face-bg, --pane-* оставлены как в утверждённых экранах, чтобы
   вёрстка Дениса переносилась дословно и не переписывалась под токены. */

:root,
[data-палитра="paper"] {
  --bg: var(--ground);
  --panel: var(--paper-panel);
  --panel-2: var(--paper-panel-2);
  --line: var(--paper-line);
  --fg: var(--paper-fg);
  --fg-dim: var(--paper-fg-dim);
  --fg-mute: var(--paper-fg-mute);
  --gold: var(--paper-accent);
  --gold-soft: var(--paper-accent-soft);
  --gold-dim: var(--paper-accent-dim);
  --accent: var(--paper-accent);
  --ok: var(--paper-ok);
  /* Был только у sand и cosmos, а используют его четыре компонента без
     запасного значения — на светлой палитре объявление отбрасывалось
     молча, и признак ошибки пропадал (29.09.2026). */
  --ember: var(--paper-ember);
}

[data-палитра="sand"] {
  --bg: var(--ground);
  --void: var(--ground);            /* земля общая, см. §3                 */
  --deep: var(--sand-deep);
  --panel: var(--sand-panel);
  --panel-2: var(--sand-deep);
  --edge: var(--sand-edge);
  --edge-2: var(--sand-edge-2);
  --edge-soft: var(--sand-edge-soft);
  --line: var(--sand-edge);
  --fg: var(--sand-fg);
  --fg-dim: var(--sand-fg-dim);
  --fg-mute: var(--sand-fg-mute);
  --plasma: var(--sand-accent);
  --accent: var(--sand-accent);
  --amber: var(--sand-amber);
  --jade: var(--sand-jade);
  --ember: var(--sand-ember);
  --gold: var(--sand-amber);
  --gold-soft: var(--sand-amber);
  --gold-dim: var(--sand-tint-2);
  --ok: var(--sand-jade);
  --tint: var(--sand-tint);
  --tint-2: var(--sand-tint-2);
  --tint-3: var(--sand-tint-3);
  --row-bg: var(--sand-row-bg);
  --grain: var(--sand-grain);
  --sky: var(--sand-sky);
  --wash: var(--sand-wash);
  --face-bg: var(--sand-face-bg);
  --core-shadow: var(--sand-core-shadow);
  --glow-done: var(--sand-glow-done);
  --pane-shadow: var(--sand-pane-shadow);
  --pane-blur: var(--sand-pane-blur);
}

[data-палитра="cosmos"] {
  --bg: var(--ground);
  --void: var(--ground);            /* земля общая, см. §3                 */
  --deep: var(--cosmos-deep);
  --panel: var(--cosmos-panel);
  --panel-2: var(--cosmos-deep);
  --edge: var(--cosmos-edge);
  --edge-2: var(--cosmos-edge-2);
  --edge-soft: var(--cosmos-edge-soft);
  --line: var(--cosmos-edge);
  --fg: var(--cosmos-fg);
  --fg-dim: var(--cosmos-fg-dim);
  --fg-mute: var(--cosmos-fg-mute);
  --plasma: var(--cosmos-accent);
  --accent: var(--cosmos-accent);
  --amber: var(--cosmos-amber);
  --jade: var(--cosmos-jade);
  --ember: var(--cosmos-ember);
  --gold: var(--cosmos-amber);
  --gold-soft: var(--cosmos-amber);
  --gold-dim: var(--cosmos-tint-2);
  --ok: var(--cosmos-jade);
  --tint: var(--cosmos-tint);
  --tint-2: var(--cosmos-tint-2);
  --tint-3: var(--cosmos-tint-3);
  --row-bg: var(--cosmos-row-bg);
  --grain: var(--cosmos-grain);
  --sky: var(--cosmos-sky);
  --wash: var(--cosmos-wash);
  --face-bg: var(--cosmos-face-bg);
  --core-shadow: var(--cosmos-core-shadow);
  --glow-done: var(--cosmos-glow-done);
  --pane-shadow: var(--cosmos-pane-shadow);
  --pane-blur: var(--cosmos-pane-blur);
}

/* ════ 5. ОБЩЕЕ ДЛЯ ДОКУМЕНТОВ, ОБЪЯВИВШИХ СЕМЕЙСТВО ═════════════════════
   Правила ниже действуют только там, где на корне стоит data-палитра, —
   то есть на экранах Портала и ни на чём другом. Они делают ровно две вещи:
   держат одну землю и одну гарнитуру на всём пути. Ни размеров, ни отступов
   экранов здесь нет: вёрстка остаётся за экранами и компонентами. */

:root[data-палитра] {
  background: var(--ground);
  color-scheme: light;
}
:root[data-палитра][data-theme="dark"] { color-scheme: dark; }

:root[data-палитра] body { font-family: var(--font-text); }
:root[data-палитра] h1,
:root[data-палитра] h2,
:root[data-палитра] h3 { font-family: var(--font-display); }

/* Служебное: элемент, спрятанный от глаз, но не от скринридера. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}