/*
 * Токены дизайн-системы.
 *
 * Источник — Design_site/Дизайн-система записи.dc.html, раздел renderVals()
 * в блоке <script type="text/x-dc">: массивы ramps, semantic, typeScale,
 * spacing, radii, fonts, а также стили компонентов в разметке того же файла.
 *
 * Все значения взяты оттуда дословно. Ничего не подобрано и не досчитано:
 * чего в дизайн-системе нет, того нет и здесь — список пропусков в конце файла.
 *
 * Имена токенов, уже объявленные в дизайн-системе (--color-success,
 * --color-warning, --color-danger, --color-info, --space-*, --radius-*),
 * сохранены дословно, чтобы файл и макет назывались одинаково.
 *
 * ОДНО ИСКЛЮЧЕНИЕ ИЗ «ВЗЯТО ДОСЛОВНО» — раздел «РАЗМЕРЫ РАСКЛАДКИ» в конце.
 * Его значений в дизайн-системе нет; они перенесены из прототипа лендинга
 * (Design_site/«Лендинг салона.dc.html») и из раздела «Сетка», чтобы у страниц
 * был один источник значений, а не числа врассыпную по файлам стилей.
 * Происхождение каждого помечено там же.
 */

/*
 * Файлы шрифтов подключаются здесь же, рядом с объявлением --font-*.
 * Имена гарнитур должны встречаться в проекте ровно один раз: разъехавшись
 * между страницей и токенами, они однажды разойдутся и по составу начертаний.
 * Строка перенесена из прототипа без изменений.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {

  /* ======================================================================
     ШКАЛЫ ЦВЕТА
     Массив ramps. Две шкалы: акцент и нейтральная. Всё остальное в файле
     ссылается сюда, а не повторяет hex, — чтобы у значения было одно место.
     ====================================================================== */

  /* Primary — приглушённый тил. Интерактив, акцентные заголовки, ссылки. */
  --color-primary-50:  #EDF4F6;
  --color-primary-100: #D9E8EC;
  --color-primary-200: #B4D2DA;
  --color-primary-300: #8BB9C5;
  --color-primary-400: #6BA6B4;
  --color-primary-500: #4E93A5;
  --color-primary-600: #427C8C;
  --color-primary-700: #366473;
  --color-primary-800: #2A4E59;
  --color-primary-900: #1E383F;

  /* Neutral — фон, поверхности, текст. 50 — фон приложения, 900 — основной текст. */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-25:  #FAFAF9;
  --color-neutral-50:  #F2F2F0;
  --color-neutral-100: #E8E8E5;
  --color-neutral-200: #DCDCD8;
  --color-neutral-300: #C4C4BF;
  --color-neutral-400: #9A9A94;
  --color-neutral-500: #6E6E68;
  --color-neutral-600: #4A4A45;
  --color-neutral-700: #33332F;
  --color-neutral-900: #1A1A18;

  /* ======================================================================
     ФОН И ПОВЕРХНОСТИ
     ====================================================================== */

  /* Фон приложения. Подпись к шкале: «50 — фон приложения». */
  --color-background: var(--color-neutral-50);

  /* Поверхность карточки, поля ввода, таблицы, тоста. */
  --color-surface: var(--color-neutral-0);

  /* ======================================================================
     ТЕКСТ
     Четыре уровня — ровно те, что использует шкала typeScale.
     ====================================================================== */

  /* Основной текст. Пара с фоном даёт 16.4:1 (AAA) — раздел «Контраст». */
  --color-text: var(--color-neutral-900);

  /* Абзацный текст: цвет токенов body и body-lg. */
  --color-text-body: var(--color-neutral-700);

  /* Второстепенный текст: цвет токенов body-sm и label. */
  --color-text-muted: var(--color-neutral-600);

  /* Приглушённый текст: цвет токена caption, он же цвет плейсхолдера. */
  --color-text-subtle: var(--color-neutral-400);

  /* Текст на заливке акцентом: кнопка, выбранный слот. */
  --color-text-on-accent: var(--color-neutral-0);

  /* Ссылки и подписи. Раздел «Контраст»: 6.2:1, AA для любого кегля. */
  --color-link: var(--color-primary-700);

  /* ======================================================================
     ГРАНИЦЫ
     ====================================================================== */

  /* Разделитель. Раздел «Сетка»: «1px · #DCDCD8 · между блоками,
     строками таблицы и полями». */
  --color-border: var(--color-neutral-200);

  /* Заметная граница: рамка поля ввода и свободного слота. */
  --color-border-strong: var(--color-neutral-300);

  /* Слабая граница: рамка карточки и строк таблицы внутри неё. */
  --color-border-subtle: var(--color-neutral-100);

  /* ======================================================================
     АКЦЕНТ И ФОКУС
     ====================================================================== */

  /* Значение свойства accent по умолчанию. */
  --color-accent: var(--color-primary-500);

  /* Кольцо фокуса. В дизайн-системе: outline 2px solid, offset 2px. */
  --color-focus-ring: var(--color-primary-500);

  /* Выделение текста мышью (::selection). */
  --color-selection-surface: var(--color-primary-100);
  --color-selection-text: var(--color-neutral-900);

  /* ======================================================================
     КНОПКИ
     Из разметки блока «Форма услуги»: основная и второстепенная.
     ====================================================================== */

  --color-button: var(--color-primary-500);
  --color-button-hover: var(--color-primary-600);
  --color-button-text: var(--color-neutral-0);

  --color-button-secondary-surface: var(--color-neutral-0);
  --color-button-secondary-border: var(--color-neutral-300);
  --color-button-secondary-text: var(--color-neutral-700);
  --color-button-secondary-hover-surface: var(--color-neutral-50);

  /* ======================================================================
     СЕМАНТИКА
     Массив semantic — четыре базовых цвета с именами токенов из макета.
     Оттенки заливки и текста ниже взяты из slotLegend, badges и тоста.
     ====================================================================== */

  /* Успех: запись подтверждена, поле валидно. */
  --color-success: #3E8E6E;
  --color-success-surface: #EDF7F2;  /* бейдж «Подтверждена» */
  --color-success-border:  #B9DDCB;  /* рамка тоста об успехе */
  --color-success-text:    #2F7458;  /* текст бейджа «Подтверждена» */

  /* Ошибка: слот занят, ошибка формы, отмена. */
  --color-danger: #C4553D;
  --color-danger-surface: #FDF2EF;  /* слот «только что занят», бейдж «Отменена» */
  --color-danger-border:  #EFC4B8;  /* его же рамка, она же рамка тоста об ошибке */
  --color-danger-text:    #A8412C;  /* его же текст */

  /* Предупреждение: запись скоро, мало свободных слотов. */
  --color-warning: #C98A2E;
  --color-warning-surface: #FBF2E3;  /* бейдж «Ожидает» */
  --color-warning-text:    #8A5D14;  /* текст бейджа «Ожидает» */
  /* Границы для этого состояния в дизайн-системе нет — см. пропуски в конце. */

  /* Подсказки и нейтральные уведомления. Совпадает с акцентом — так в макете. */
  --color-info: #4E93A5;

  /* ======================================================================
     ШРИФТЫ
     Массив fonts. Начертания — из строки подключения Google Fonts.
     ====================================================================== */

  /* Заголовки H1–H3, капс, отрицательный трекинг. */
  --font-heading: Manrope, system-ui, sans-serif;

  /* Текст, интерфейс, кнопки, поля. */
  --font-body: 'Golos Text', system-ui, sans-serif;

  /* Время слотов, даты, цены, служебные подписи. */
  --font-mono: 'JetBrains Mono', monospace;

  /* Начертания. Manrope: 400–800, Golos Text: 400/500/600, JetBrains Mono: 400/500/700. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ======================================================================
     ШКАЛА ТЕКСТА
     Массив typeScale. Размер, интерлиньяж, начертание и трекинг заданы
     там вместе, поэтому и здесь идут вместе: по одному размеру верстать
     нечем. Капс отмечен комментарием — он есть у h1, h2 и caption.
     ====================================================================== */

  /* h1 — 56/56 · 800 · −3.5% · CAPS */
  --text-h1-size: 56px;
  --text-h1-line: 1.0;
  --text-h1-weight: 800;
  --text-h1-tracking: -0.035em;

  /* h2 — 40/42 · 800 · −3% · CAPS */
  --text-h2-size: 40px;
  --text-h2-line: 1.05;
  --text-h2-weight: 800;
  --text-h2-tracking: -0.03em;

  /* h3 — 24/29 · 700 · −2% */
  --text-h3-size: 24px;
  --text-h3-line: 1.2;
  --text-h3-weight: 700;
  --text-h3-tracking: -0.02em;

  /* h4 — 18/23 · 700 */
  --text-h4-size: 18px;
  --text-h4-line: 1.3;
  --text-h4-weight: 700;
  --text-h4-tracking: -0.01em;

  /* body-lg — 18/28 · 400 */
  --text-body-lg-size: 18px;
  --text-body-lg-line: 1.55;
  --text-body-lg-weight: 400;
  --text-body-lg-tracking: 0;

  /* body — 16/25 · 400 */
  --text-body-size: 16px;
  --text-body-line: 1.55;
  --text-body-weight: 400;
  --text-body-tracking: 0;

  /* body-sm — 14/21 · 400 */
  --text-body-sm-size: 14px;
  --text-body-sm-line: 1.5;
  --text-body-sm-weight: 400;
  --text-body-sm-tracking: 0;

  /* label — 13/18 · 500 */
  --text-label-size: 13px;
  --text-label-line: 1.4;
  --text-label-weight: 500;
  --text-label-tracking: 0;

  /* caption — 11/15 · моно · +12% · CAPS */
  --text-caption-size: 11px;
  --text-caption-line: 1.4;
  --text-caption-weight: 400;
  --text-caption-tracking: 0.12em;

  /* time — 18/22 · моно · tabular */
  --text-time-size: 18px;
  --text-time-line: 1.2;
  --text-time-weight: 500;
  --text-time-tracking: 0;

  /* ======================================================================
     ОТСТУПЫ
     Массив spacing. База 4px. Шаги ровно те, что объявлены: 5, 7, 9, 10
     и прочих промежуточных в дизайн-системе нет, и здесь их тоже нет.
     ====================================================================== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ======================================================================
     СКРУГЛЕНИЯ
     Массив radii — вместе с назначением каждого.
     ====================================================================== */

  --radius-xs: 8px;     /* бейдж, чип */
  --radius-sm: 10px;    /* поля админки */
  --radius-md: 12px;    /* кнопки, слоты */
  --radius-lg: 16px;    /* карточки */
  --radius-xl: 20px;    /* фото, модалки */
  --radius-full: 999px; /* аватары, floating */

  /* ======================================================================
     РАЗМЕРЫ РАСКЛАДКИ
     Единственный раздел файла, значения которого дизайн-система не объявляла.
     Раньше эти числа стояли прямо в стилях страниц — и это ровно тот случай,
     против которого написано правило 4: подобранное на глаз значение потом
     не с чем сверить. Собранные в одном месте, они хотя бы совпадают между
     страницами и правятся один раз.

     Источник у каждого указан: «Сетка» — раздел дизайн-системы, «прототип» —
     Design_site/«Лендинг салона.dc.html».
     ====================================================================== */

  /* Толщина линий. «Сетка»: «1px · #DCDCD8 · между блоками, строками
     таблицы и полями». Цвет уже есть выше, толщины не было. */
  --border-width: 1px;

  /* Кольцо фокуса. «Сетка»: outline 2px solid, offset 2px. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Ширина содержимого страницы. Прототип: 1240px у лендинга, формы записи
     и экрана подтверждения — во всех трёх одинаково. */
  --layout-max-width: 1240px;

  /* Ширина строки текста. Пять значений прототипа, от узкой колонки футера
     до широкого ответа в FAQ. */
  --measure-xs: 280px;
  --measure-sm: 380px;
  --measure-md: 460px;
  --measure-lg: 480px;
  --measure-xl: 640px;

  /* Колонка с заголовком в двухколоночном блоке. Прототип: 260px
     у преимуществ, 340px у FAQ. */
  --column-sm: 260px;
  --column-md: 340px;

  /* Высота фотоблоков. Прототип: 300px карточка мастера, 420px блок
     «О салоне», 560px hero; 240px — тот же блок на узком экране. */
  --media-height-sm: 240px;
  --media-height-md: 300px;
  --media-height-lg: 420px;
  --media-height-xl: 560px;

  /* Плавающая кнопка записи. Прототип: 72×72. */
  --size-floating: 72px;
}

/*
 * ЧЕГО В ДИЗАЙН-СИСТЕМЕ НЕТ
 *
 * Перечислено, а не подобрано по аналогии: похожий на вид оттенок — это
 * догадка, и в макете её потом не с чем сверить.
 *
 * 1. Тёмная тема. Объявлена одна палитра, парных значений под тёмный фон нет.
 * 2. Состояния кнопки :active и :disabled. Есть только базовое и наведение
 *    (#4E93A5 → #427C8C). Нажатие и заблокированная кнопка не нарисованы.
 * 3. Граница для предупреждения. У успеха и ошибки есть трио
 *    заливка/граница/текст, у warning — только заливка #FBF2E3 и текст #8A5D14.
 * 4. Состояние ошибки у поля ввода. У поля одна рамка #C4C4BF; рамка #EFC4B8
 *    относится к слоту «только что занят», а не к полю, и переносить её
 *    на поле — уже допущение.
 * 5. Тени. Три значения есть в разметке (карточка, floating-кнопка, тост),
 *    но именами не названы и в токены не вынесены. Раздел «Сетка» говорит
 *    только «тени только у модалок и тоста».
 * 6. Брейкпоинты. Значения заданы (sm ≥390px, md ≥768px, lg ≥1280px), но
 *    пользовательские свойства в media-запросах не работают — это ограничение
 *    самого CSS, а не пробел в дизайн-системе. Переменными их сделать нельзя
 *    ни при каком желании, и в стилях страниц они остаются числами.
 * 7. Ширина контейнера и колонки сетки. Раздел «Сетка» описывает только шаг
 *    4px, радиусы, брейкпоинты и разделители; 1240px и поля 56px — вёрстка
 *    самой страницы дизайн-системы, а не объявленный токен. Значения всё же
 *    собраны в разделе «РАЗМЕРЫ РАСКЛАДКИ» — с пометкой, что они из прототипа,
 *    а не из системы. Появится настоящая сетка — заменить нужно будет там.
 */