/* Токены дизайн-системы «Ноготочки».
 *
 * Отдельной страницы с дизайн-системой в прототипе нет. Основной источник —
 * стили prototype/Ноготочки - Лендинг.dc.html; значения, которых на лендинге
 * нет (состояния слотов и дней календаря, цвет подсказки в поле, фон
 * неактивной кнопки), взяты из экранов Запись и Подтверждение.
 *
 * Все значения скопированы из прототипа как есть. Ничего не подобрано
 * «на глаз»: чего в прототипе не нашлось, в файле нет — список пропусков
 * в конце файла.
 */

:root {
  /* ======================================================================
   * Цвета: поверхности
   * ==================================================================== */

  /* Фон страницы */
  --color-bg: oklch(0.975 0.004 90);
  /* Фон липкой шапки поверх контента, под ним blur(10px) */
  --color-bg-translucent: oklch(0.975 0.004 90 / 0.9);
  /* Фон выделенной секции и карточки: мастера, контакты, занятый слот */
  --color-surface: oklch(0.94 0.006 80);
  /* Фон выбранной карточки мастера */
  --color-surface-selected: oklch(0.96 0.02 32);
  /* Тёмная секция: подвал-призыв, фон основной кнопки */
  --color-surface-inverse: oklch(0.2 0.006 90);

  /* ======================================================================
   * Цвета: текст
   * ==================================================================== */

  /* Основной текст */
  --color-text: oklch(0.2 0.006 90);
  /* Второстепенный текст: описания, подписи, надзаголовки секций */
  --color-text-muted: oklch(0.48 0.006 90);
  /* Подсказка в пустом поле ввода (input::placeholder) */
  --color-text-placeholder: oklch(0.65 0.006 90);
  /* Недоступный элемент: занятый слот, выходной день, день без свободного
   * времени */
  --color-text-disabled: oklch(0.75 0.006 80);
  /* Прошедшая дата в календаре */
  --color-text-past: oklch(0.8 0.006 80);
  /* Дата соседнего месяца и недоступный слот */
  --color-text-inactive: oklch(0.85 0.006 80);
  /* Текст на акцентной и на тёмной подложке */
  --color-text-on-accent: #fff;
  /* Текст на тёмной подложке поверх фотографии (лид-абзац героя) */
  --color-text-on-photo: #f2efec;
  /* Текст на тёмной секции и на основной кнопке */
  --color-text-inverse: oklch(0.975 0.004 90);

  /* ======================================================================
   * Цвета: границы
   * ==================================================================== */

  /* Обычная граница: карточки, поля, разделители */
  --color-border: oklch(0.85 0.006 80);
  /* Заметная граница: сегодняшний день в календаре */
  --color-border-strong: oklch(0.2 0.006 90);
  /* Пунктирная граница недоступного слота */
  --color-border-subtle: oklch(0.9 0.006 80);
  /* Граница выбранной карточки мастера, рисуется в 2px */
  --color-border-selected: oklch(0.58 0.09 32);

  /* ======================================================================
   * Цвета: акцент и кнопки
   * ==================================================================== */

  /* Акцент: ссылка при наведении, выделение, выбранные дата и время */
  --color-accent: oklch(0.58 0.09 32);

  /* Основная кнопка: «Записаться онлайн» в шапке, «Записаться» в карточке
   * услуги, «Далее» на экране записи */
  --color-button-primary-bg: oklch(0.2 0.006 90);
  --color-button-primary-text: oklch(0.975 0.004 90);

  /* Акцентная кнопка: призывы в герое и в финальной секции, активная
   * кнопка «Подтвердить запись» */
  --color-button-accent-bg: oklch(0.58 0.09 32);
  --color-button-accent-text: #fff;

  /* Неактивная кнопка «Подтвердить запись», пока не отмечено согласие */
  --color-button-disabled-bg: oklch(0.85 0.006 80);
  --color-button-disabled-text: #fff;

  /* Второстепенная кнопка «Назад»: рамка, без заливки */
  --color-button-secondary-border: oklch(0.85 0.006 80);
  --color-button-secondary-text: oklch(0.2 0.006 90);

  /* Выделение текста мышью (::selection) */
  --color-selection-bg: oklch(0.58 0.09 32);
  --color-selection-text: oklch(0.975 0.004 90);

  /* ======================================================================
   * Шрифты
   * ==================================================================== */

  /* Заголовки и логотип */
  --font-heading: 'Cormorant Garamond', serif;
  /* Основной текст, поля ввода, кнопки */
  --font-body: 'Manrope', sans-serif;

  /* В стилях прототипа встречаются только эти две насыщенности.
   * Шрифтовая ссылка грузит ещё 400 и 700 для Manrope и 400 для
   * Cormorant Garamond, но ни одна из них в разметке не задана явно. */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ======================================================================
   * Размеры текста
   * ==================================================================== */

  /* Дни недели в шапке календаря */
  --text-2xs: 11px;
  /* Подпись под суммой, надзаголовок шага */
  --text-xs: 12px;
  /* Мелкая подпись: надзаголовок секции, рейтинг, опыт, копирайт */
  --text-sm: 13px;
  /* Второстепенный текст: описание услуги, пункты меню, ссылки */
  --text-base: 14px;
  /* Базовый текст управляющих элементов: поля ввода, кнопки, итог выбора */
  --text-md: 15px;
  /* Цена в карточке услуги, крупная кнопка, крестик закрытия */
  --text-lg: 16px;
  /* Лид-абзац героя */
  --text-xl: 17px;
  /* Итоговая сумма на экране подтверждения */
  --text-2xl: 18px;

  /* Заголовок карточки услуги и имя мастера */
  --text-heading-sm: 22px;
  /* Логотип в подвале и в шапке экрана подтверждения */
  --text-heading-md: 24px;
  /* Заголовок шага на экране записи */
  --text-heading-lg: 26px;
  /* Логотип в шапке лендинга */
  --text-heading-xl: 28px;
  /* Заголовок экрана подтверждения */
  --text-heading-2xl: 30px;
  /* Заголовок секции лендинга */
  --text-heading-3xl: 40px;
  /* Заголовок финальной секции-призыва */
  --text-heading-4xl: 48px;
  /* Заголовок героя */
  --text-heading-hero: 56px;

  /* Межстрочные интервалы */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-loose: 1.7;

  /* Межбуквенные интервалы */
  --tracking-tight: 0.02em;  /* пункты меню, кнопки */
  --tracking-normal: 0.04em; /* логотип */
  --tracking-wide: 0.08em;   /* надзаголовок шага, uppercase */
  --tracking-wider: 0.12em;  /* надзаголовок секции, uppercase */

  /* ======================================================================
   * Отступы
   * ==================================================================== */

  --space-2xs: 6px;
  --space-xs: 8px;
  --space-sm: 10px;
  --space-md: 12px;
  --space-lg: 14px;
  --space-xl: 16px;
  --space-2xl: 20px;
  --space-3xl: 24px;
  --space-4xl: 28px;
  --space-5xl: 32px;
  --space-6xl: 40px;
  --space-7xl: 48px;
  --space-8xl: 64px;
  --space-9xl: 96px;

  /* Отступы макета */
  /* Боковые поля страницы */
  --layout-gutter: 64px;
  /* Вертикальные поля секции лендинга */
  --layout-section-y: 120px;
  /* Вертикальные поля тёмной секции-призыва и нижнее поле секций
   * «Мастера» и «Контакты» */
  --layout-section-y-lg: 140px;
  /* Поля липкой шапки: 22px по вертикали, боковые — как у страницы */
  --layout-header-y: 22px;
  /* Максимальная ширина макета */
  --layout-max-width: 1440px;

  /* Внутренние поля элементов */
  --padding-card: 36px;          /* карточка услуги на лендинге */
  --padding-card-sm: 20px;       /* карточка мастера на экране записи */
  --padding-panel: 28px;         /* блок сводки на подтверждении */
  --padding-input: 14px 16px;    /* поле ввода */
  --padding-button: 16px;        /* кнопка во всю ширину */
  --padding-button-sm: 12px 26px;/* кнопка в шапке */
  --padding-button-lg: 16px 36px;/* акцентная кнопка героя */

  /* ======================================================================
   * Скругления
   * ==================================================================== */

  /* Кнопки и поля ввода */
  --radius-sm: 2px;
  /* Маркер в легенде календаря */
  --radius-xs: 3px;
  /* Карточки, слоты, ячейки календаря, блок сводки */
  --radius-md: 4px;
  /* Круглая кнопка закрытия */
  --radius-full: 50%;

  /* ======================================================================
   * Цвета ошибки и успеха
   *
   * ИСТОЧНИК — НЕ ПРОТОТИП. В прототипе этих значений нет: ни сообщения об
   * ошибке, ни подтверждения успеха на трёх экранах не нарисовано.
   * Значения подобраны решением владельца проекта в той же системе oklch
   * и в той же приглушённой гамме, что остальная палитра: светлота на
   * уровне второстепенного текста (0.48), насыщенность на уровне акцента
   * (0.09), тон фона — на уровне поверхностей (0.95).
   * ==================================================================== */

  /* Ошибка: красновато-коричневый. Тон рядом с акцентным (32), чуть ниже
   * по кругу и темнее, чтобы читался как предупреждение, а не как призыв */
  --color-error-text: oklch(0.45 0.1 28);
  /* Фон подсказки об ошибке под полем */
  --color-error-bg: oklch(0.95 0.025 28);

  /* Успех: приглушённый зелёный той же насыщенности, что акцент */
  --color-success-text: oklch(0.48 0.09 148);
  /* Фон подсказки об успехе */
  --color-success-bg: oklch(0.95 0.025 148);

  /* ======================================================================
   * Точка перелома
   *
   * ИСТОЧНИК — НЕ ПРОТОТИП. В прототипе нет ни одного @media, макет
   * свёрстан на фиксированную ширину 1440px. Значение 768px — решение
   * владельца проекта.
   *
   * Переменная нужна как единственная запись этого числа в проекте:
   * в условии @media переменные не работают, поэтому в самих медиа-запросах
   * 768px пишется литералом — @media (max-width: 768px).
   * ==================================================================== */

  --breakpoint-narrow: 768px;
}

/* ========================================================================
 * Чего в прототипе нет — не придумано и не подобрано
 *
 * 1. Цвет ошибки. В прототипе его нет: ни сообщения об ошибке, ни поля
 *    в ошибочном состоянии, красного цвета в файлах нет вовсе. Закрыто
 *    решением владельца проекта — см. раздел «Цвета ошибки и успеха».
 * 2. Цвет успеха. Экрана успешной записи в прототипе нет, зелёного цвета
 *    в файлах нет вовсе. Закрыто там же.
 * 3. Состояния наведения и фокуса для кнопок и полей. Задано единственное
 *    правило a:hover (цвет ссылки становится акцентным) — оно учтено как
 *    --color-accent. Ни hover, ни focus, ни active для кнопок и полей
 *    в прототипе не описаны.
 * 4. Тени. Ни одного box-shadow в файлах нет; глубина шапки сделана
 *    размытием подложки и нижней границей.
 * 5. Точки перелома под адаптив. Ни одного @media в файлах нет, макет
 *    свёрстан на фиксированную ширину 1440px. Закрыто решением владельца
 *    проекта — см. --breakpoint-narrow.
 * 6. Насыщенности шрифта 400 и 700. Загружаются шрифтовой ссылкой, но
 *    в разметке не применяются ни разу.
 * ===================================================================== */