/* ============================================================================
   TapBook — дизайн-система публичного сайта (блок 72 «Редизайн», Часть 1, шаг 1)
   ============================================================================

   ЧТО ЭТО. Единственный набор значений, из которого собираются «главные
   страницы» сайта — список согласован с оператором 22.08.2026 и расширен им
   же 23.08.2026 (три последние строки):

     • frontend/landing.html       — главная
     • frontend/business.html      — «Для бизнеса», ОБА режима переключателя:
                                     ?role=master и ?role=salon
     • frontend/register.html      — регистрация                    ✅ переведена
     • frontend/privacy.html       — политика обработки ПДн (/privacy)
     • frontend/consent.html       — согласие на обработку ПДн (/consent)
     • frontend/team.html          — команда
     • frontend/confirm-email.html — подтверждение почты
     • frontend/reset.html         — восстановление пароля

   ЧЕГО ЭТО НЕ КАСАЕТСЯ. Страницы салонов `tap-book.ru/<slug>` (booking.html)
   оформляются НЕ этими токенами, а конструктором макета и темы из Частей 2 и 3
   ТЗ. Их стили сознательно не участвовали в сборке системы. То же относится к
   будущей цифровой визитке мастера (`Doc/phases/micro_features.md`, п. 4).

   ОТКУДА ЗНАЧЕНИЯ. Отправная точка — палитра, одобренная оператором в
   `frontend/schedule.html` (блок `:root`). Остальное сведено из кода страниц
   выше. Значений «про запас» в системе больше нет: 23.08.2026 оператор
   выкинул --color-warning и --color-line-strong (в коде их не было) и отказался
   от --shadow-card (сайт остаётся плоским). Разбор — в `Doc/brand/design_audit.md`.

   КАК ПОДКЛЮЧАТЬ. Страницы переводятся ПО ОДНОЙ, каждая под отдельную проверку
   оператора (его решение от 23.08.2026). Переведена `register.html`. При
   подключении `<link rel="stylesheet" href="/tokens.css">` ставится ПЕРЕД
   собственным `<style>` страницы, а локальный `:root` страницы удаляется —
   иначе он перебьёт систему по каскаду.

   ИМЕНОВАНИЕ. Имена совпадают с `Doc/brand/tokens.json`: путь `color.accent.base`
   в JSON соответствует переменной `--color-accent`. Префиксы намеренно длиннее
   старых (`--color-accent`, а не `--accent`), чтобы токены не сталкивались с
   локальными `:root` страниц, пока те не переведены.

   ЕДИНИЦЫ. Всё в px — сайт свёрстан в пикселях, перевод в rem это отдельная
   задача с отдельным риском (см. отчёт).
   ============================================================================ */

:root {

  /* ==========================================================================
     1. ЦВЕТ — ПОВЕРХНОСТИ
     Фон страницы, карточки и всё, что лежит «под» контентом.
     ========================================================================== */

  /* Фон страницы. Молочно-розовый, не нейтрально-серый: это узнаваемая часть
     бренда. Из :root schedule.html. Заменяет #f5f5f6 на главной и «Для бизнеса». */
  --color-bg: #f5f2f4;

  /* Фон карточки, тарифного плана, блока формы: строго белый. */
  --color-surface: #ffffff;

  /* Светлая подложка акцентом: врезки и сноски внутри карточек — блок
     «СМС-аддон» на «Для бизнеса», контакты в политике, цитата в согласии.
     Заменяет разъехавшиеся #f4f1f6 / #faf5f8 / #f0eaf0 / #f3ecff. */
  --color-tint: #f8eef3;

  /* Обводки карточек, разделители строк, границы полей ввода. */
  --color-line: #ece5ee;

  /* ==========================================================================
     2. ЦВЕТ — ТЕКСТ
     ========================================================================== */

  /* Основной текст. Почти чёрный с фиолетовым подмесом. */
  --color-ink: #231e28;

  /* Второстепенный текст: подписи полей, лиды, мета-информация, футер. */
  --color-muted: #7a7280;

  /* Текст и иконки поверх акцентной заливки. */
  --color-on-accent: #ffffff;

  /* ==========================================================================
     3. ЦВЕТ — АКЦЕНТ
     Винный — единственный бренд-цвет. Сейчас на сайте его нет: главная и
     «Для бизнеса» покрашены в почти чёрный #232228, регистрация — в
     фиолетовый #7c3aed. Оба уходят.
     ========================================================================== */

  /* Базовый акцент: заливка главных кнопок, выбранные состояния, ссылки. */
  --color-accent: #8b3a62;

  /* Тёмный акцент: наведение и нажатие на кнопку, а также текст акцентом
     поверх светлой подложки --color-tint (на ней базовый акцент даёт
     недостаточный контраст). */
  --color-accent-dark: #6f2d4e;

  /* ==========================================================================
     4. ЦВЕТ — СТАТУСЫ
     Функциональные цвета. На страницах Части 1 они встречаются только текстом:
     галочки в списке тарифа, сообщение об успехе, ошибка формы.
     ========================================================================== */

  /* Успех: галочки «✓» в списках тарифов, подтверждение отправки формы.
     Заменяет #1f8a4c и #1a7f37. */
  --color-success: #2e7a57;

  /* Ошибка: сообщение под формой. Заменяет #b3261e и #c02b2b. */
  --color-danger: #b03a3a;

  /* Предупреждающего цвета в системе сознательно НЕТ: оператор 23.08.2026
     отказался заводить токен про запас — на страницах сайта нет ни одной
     предупреждающей плашки. Появится плашка — появится и токен. */

  /* ==========================================================================
     5. ТИПОГРАФИКА — ГАРНИТУРА
     Системный шрифт сознательно: скорость загрузки, нативность, отсутствие
     FOUT. Веб-шрифты на публичных страницах не используются (решение брифа).
     ========================================================================== */

  /* Единый стек. Заменяет второй вариант с регистрации
     (-apple-system, Segoe UI, Roboto, Arial — без system-ui, зато с Arial). */
  --font-family-base: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;

  /* Моноширинные цифры для сумм и дат — чтобы колонки цен не «прыгали».
     Применяется как значение font-variant-numeric. */
  --font-numeric: tabular-nums;

  /* ==========================================================================
     6. ТИПОГРАФИКА — РАЗМЕРЫ
     Шкала семантическая: имя говорит о роли, а не о размере. 16px — жёсткий
     минимум для полей ввода: при меньшем размере мобильный Safari зумит
     страницу при фокусе.
     ========================================================================== */

  --font-size-hero: clamp(27px, 5.4vw, 40px);  /* h1 главной страницы */
  --font-size-h1: clamp(24px, 5vw, 36px);      /* h1 остальных страниц */
  --font-size-h2: 20px;                         /* заголовок секции */
  --font-size-h3: 18px;                         /* подзаголовок в документе */
  --font-size-h4: 16px;                         /* название тарифа, заголовок карточки */
  --font-size-display: 26px;                    /* цена тарифа — крупное число */
  --font-size-body: 16px;                       /* основной текст и поля ввода */
  --font-size-body-sm: 15px;                    /* плотный текст, врезки */
  --font-size-label: 14px;                      /* лиды, навигация, строки списков */
  --font-size-caption: 13px;                    /* подписи полей, мета, футер */
  --font-size-micro: 12px;                      /* сноски, мелкие пояснения */
  --font-size-nano: 11px;                       /* бейджи «Хит» и подобные */

  /* ==========================================================================
     7. ТИПОГРАФИКА — НАЧЕРТАНИЯ
     Четыре ступени: ровно столько реально работает на страницах Части 1.
     Полуступени 500 / 650 / 750 существуют в панели и на страницах салонов —
     в систему сайта они сознательно не взяты.
     ========================================================================== */

  --font-weight-regular: 400;    /* основной текст */
  --font-weight-semibold: 600;   /* кнопки, навигация, названия в списках */
  --font-weight-bold: 700;       /* заголовки секций, названия тарифов */
  --font-weight-hero: 800;       /* логотип, h1, цена — не чаще пары раз на экран */

  /* ==========================================================================
     8. ТИПОГРАФИКА — ИНТЕРЛИНЬЯЖ И ТРЕКИНГ
     ========================================================================== */

  --line-height-heading: 1.25;   /* заголовки */
  --line-height-base: 1.5;       /* основной текст интерфейса */
  --line-height-relaxed: 1.6;    /* длинные юридические тексты */

  --letter-spacing-hero: -.03em;     /* h1: крупный текст собирается плотнее */
  --letter-spacing-heading: -.02em;  /* логотип, заголовки секций, цена */

  /* ==========================================================================
     9. РАДИУСЫ
     Четыре ступени плюс две служебные формы — вместо девяти значений,
     разошедшихся по страницам (одних только кнопок сейчас три радиуса).
     ========================================================================== */

  --radius-xs: 6px;        /* бейджи, инлайн-код */
  --radius-sm: 10px;       /* мелкие кнопки, кнопка «Войти» в шапке */
  --radius-md: 12px;       /* кнопки, поля ввода, плитки, элементы списков */
  --radius-lg: 16px;       /* карточки и тарифные планы */
  --radius-pill: 999px;    /* пилюли: выбранная вертикаль на главной */
  --radius-circle: 50%;    /* круглые счётчики шагов и аватары */

  /* ==========================================================================
     10. ТЕНИ
     ⚠️ Тени карточкам сайта НЕ даём — решение оператора от 23.08.2026: сайт
     остаётся плоским, объём есть только у панели и страниц салонов. Токена
     --shadow-card в системе поэтому нет.
     Единственная тень здесь — кольцо фокуса, и это не объём, а доступность.
     ========================================================================== */

  /* Кольцо фокуса. Значение эталонное: ровно так фокус описан в schedule.html
     (`.dlg input:focus`). Применять ТОЛЬКО в паре со сменой цвета рамки на
     --color-accent: одно кольцо цветом --color-tint без рамки слишком слабое. */
  --shadow-focus: 0 0 0 3px var(--color-tint);

  /* ==========================================================================
     11. ОТСТУПЫ
     Шкала кратна 2px, имя совпадает со значением — так число видно прямо в
     коде. Верстать следует прикладными алиасами ниже, а не голыми ступенями.
     ========================================================================== */

  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;

  /* Прикладные алиасы — то, чем нужно верстать. */
  --space-page-x: 16px;       /* боковые поля страницы */
  --space-page-top: 24px;     /* верхний отступ контента */
  --space-page-bottom: 56px;  /* «воздух» под последним блоком */
  --space-card: 16px;         /* внутренние поля карточки */
  --space-card-lg: 24px;      /* внутренние поля документа (политика, согласие) */
  --space-stack: 16px;        /* вертикальный зазор между карточками */
  --space-section: 32px;      /* зазор между смысловыми секциями */
  --space-inline: 8px;        /* зазор между соседними кнопками и плитками */

  /* ==========================================================================
     12. РАЗМЕРЫ
     Ширины контейнеров и метрика элементов управления.
     ========================================================================== */

  /* Узкая колонка формы: регистрация. */
  --width-form: 460px;

  /* Широкая колонка контента: главная, «Для бизнеса», юридические страницы.
     Главная сейчас 760px — предлагается подтянуть к остальным. */
  --width-content: 820px;

  /* Высота элемента управления: 12px + 16px текста + 12px + рамки. Значение
     выбрано так, чтобы перекрывать минимальную цель нажатия в 44px. */
  --control-height: 46px;

  /* Внутренние поля элементов управления. */
  --control-padding-y: 12px;
  --control-padding-x: 14px;
  --button-padding-y: 13px;
  --button-padding-x: 16px;

  /* Толщина рамки. На страницах Части 1 везде 1px — второй ступени нет. */
  --border-width: 1px;

  /* Непрозрачность отключённой кнопки. Единственная метрика, по которой все
     пять страниц уже согласны между собой — значение сохранено как есть. */
  --opacity-disabled: .6;

  /* ==========================================================================
     13. ТОЧКИ ПЕРЕЛОМА
     Две ступени вместо четырёх разошедшихся (380 / 560 / 620 / 640).
     ⚠️ CSS-переменные НЕ работают внутри @media — эти токены существуют как
     общий справочник для вёрстки и для макетного инструмента, а в самих
     медиазапросах значения пишутся числом.
     ========================================================================== */

  --breakpoint-sm: 480px;   /* узкие телефоны: сетка плиток ужимается */
  --breakpoint-md: 640px;   /* граница телефон/планшет: сетки в одну колонку */

  /* ==========================================================================
     14. ДВИЖЕНИЕ
     Анимации короткие и только на отклик нажатия и наведения.
     ========================================================================== */

  --motion-press: .06s;      /* отклик на нажатие (transform: scale) */
  --motion-fast: .12s;       /* смена цвета рамки и фона при наведении */
  --motion-easing: ease;
}

/* ============================================================================
   МОСТ СОВМЕСТИМОСТИ (пока выключен)

   Страницы Части 1 объявляют собственные короткие имена (--bg, --card,
   --ink, --muted, --line, --accent, --ok). Блок ниже переводит их на общую
   систему одной строкой — его можно включить на шаге 2, чтобы перевести
   страницу на токены, не переписывая её CSS целиком.

   ⚠️ Для `register.html` мост НЕ понадобился: её CSS переписан на длинные
   имена напрямую (страница маленькая, 25 строк стилей). Мост пригодится на
   `landing.html` и `business.html`, где правил заметно больше.

   ⚠️ Включать только вместе с удалением локального `:root` у страницы: если
   локальный блок останется ниже по каскаду, он перебьёт эти значения, и
   получится ложное ощущение, что страница переведена.

   ⚠️ НЕ подключать к booking.html: у неё свой `:root`, и по решению оператора
   её оформление задаётся конструктором темы, а не токенами сайта.

  :root {
    --bg: var(--color-bg);
    --card: var(--color-surface);
    --ink: var(--color-ink);
    --muted: var(--color-muted);
    --line: var(--color-line);
    --accent: var(--color-accent);
    --accent-ink: var(--color-on-accent);
    --hi: var(--color-tint);
    --ok: var(--color-success);
    --bad: var(--color-danger);
  }
   ============================================================================ */