/* Токены дизайн-системы TopBro — собраны из Прототип/TopBro Design System.dc.html.
 * Источник — только эта страница (Public Theme, разделы 02–04): ничего не досочинено
 * и не взято по аналогии из других экранов. Где в дизайн-системе значения нет —
 * переменная не заведена, это отмечено в комментарии на месте.
 *
 * Design System документирует ДВЕ темы: Public (тёмная, клиентский сайт) и Admin
 * (светлая, панель управления). Ниже — только Public: этот файл для web/, то есть
 * клиентского сайта; светлая Admin-тема (--adm-bg #F5F4F1, --adm-card #FFFFFF,
 * --adm-row-hover #FAF9F6, --adm-border #E4E1DA, --adm-text #1C1A16,
 * --adm-text-muted #6E6A62 — раздел 02 страницы) сюда не включена.
 */

:root {

  /* ===== Цвет ===== */

  /* Фон, поверхности, границы, текст (раздел 02 «Цвет» → PUBLIC · ПОВЕРХНОСТИ И ТЕКСТ) */
  --color-bg: #14120F;              /* Фон страницы, тёплый уголь */
  --color-surface: #1C1A16;         /* Карточки, слоты, инпуты */
  --color-surface-hover: #262219;   /* Наведение, приподнятый слой */
  --color-border: #2E2A24;          /* Границы, разделители */
  --color-text: #F5F1EA;            /* Основной текст · контраст 15.8:1 на фоне */
  --color-text-muted: #A39C90;      /* Вторичный текст · контраст 6.9:1 (AA) */

  /* Акцент / кнопка (раздел 02 «Цвет» → ACCENT · ЗОЛОТО) */
  --color-button-bg: #E0B366;          /* default */
  --color-button-bg-hover: #EFC880;    /* hover */
  --color-button-bg-active: #C79A45;   /* active */
  --color-button-bg-disabled: #4A422F; /* disabled, заливка */
  --color-button-text: #14120F;        /* текст на золоте — контраст 10.4:1 */
  --color-button-text-disabled: #8A7E63; /* текст на disabled-заливке */

  /* Статусы (раздел 02 «Цвет» → SEMANTIC · СТАТУСЫ, одинаковы в обеих темах) */
  --color-success: #4CAF7D; /* свободно, подтверждено */
  --color-warning: #E08A2E; /* ожидает, мало слотов */
  --color-error: #E05A50;   /* отменено, конфликт (в дизайн-системе подписано «danger») */
  --color-neutral: #7C93B8; /* черновик, неявка */

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

  /* Семейства (раздел 03 «Типографика») */
  --font-display: 'Playfair Display', serif; /* витрина: H1, названия секций, крупные цены. Не в админке и не мельче 20px */
  --font-body: Manrope, sans-serif;          /* весь функциональный UI: кнопки, поля, слоты, таблицы, бейджи */
  --font-mono: 'JetBrains Mono', monospace;  /* капсы-метки, ID записей, номера разделов */

  /* Начертания — по факту подключённых в helmet весов Google Fonts (раздел 03) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800; /* только Manrope */

  /* ===== Размеры текста ===== */
  /* Раздел 03, таблица токенов: «ОБРАЗЕЦ / ТОКЕН / DESKTOP 1440 / MOBILE 390».
   * Формат ячейки — «размер/высота строки · начертание». Здесь — размер и line-height
   * отдельными переменными для desktop (основные, без суффикса) и mobile (суффикс -mobile);
   * начертание для каждого — в --font-weight-* выше, комментарий указывает какое. */

  --text-h1-size: 64px;   --text-h1-line-height: 68px;  /* Playfair Display, --font-weight-medium, letter-spacing −1% */
  --text-h1-size-mobile: 36px; --text-h1-line-height-mobile: 40px; /* --font-weight-medium */

  --text-h2-size: 40px;   --text-h2-line-height: 46px;  /* Playfair Display, --font-weight-medium */
  --text-h2-size-mobile: 28px; --text-h2-line-height-mobile: 34px; /* --font-weight-medium */

  --text-h3-size: 24px;   --text-h3-line-height: 30px;  /* Manrope, --font-weight-bold */
  --text-h3-size-mobile: 20px; --text-h3-line-height-mobile: 26px; /* --font-weight-bold */

  --text-body-size: 16px; --text-body-line-height: 26px; /* Manrope, --font-weight-regular */
  --text-body-size-mobile: 15px; --text-body-line-height-mobile: 24px; /* --font-weight-regular */

  --text-label-size: 15px; --text-label-line-height: 20px; /* Manrope, --font-weight-semibold — одинаковый на desktop и mobile */

  --text-caption-size: 13px; --text-caption-line-height: 18px; /* Manrope, --font-weight-medium */
  --text-caption-size-mobile: 12px; --text-caption-line-height-mobile: 16px; /* --font-weight-medium */

  /* ===== Отступы ===== */
  /* Раздел 04 «Отступы, радиусы, тени» → SPACING · 4PT GRID. Значение переменной —
   * сам шаг сетки; назначение конкретного шага — в комментарии, как в дизайн-системе. */
  --space-4: 4px;   /* иконка ↔ подпись */
  --space-8: 8px;   /* внутри строки, чипы */
  --space-12: 12px; /* поля инпута, зазор слотов */
  --space-16: 16px; /* внутренний padding карточки (mobile) */
  --space-24: 24px; /* padding карточки (desktop), gap сетки */
  --space-32: 32px; /* между блоками */
  --space-48: 48px; /* шаг секции (mobile) */
  --space-96: 96px; /* шаг секции (desktop) */

  /* ===== Скругления ===== */
  /* Раздел 04 «Отступы, радиусы, тени» → RADIUS */
  --radius-control: 10px; /* кнопки, инпуты, слоты */
  --radius-card: 16px;    /* карточки услуг, мастеров */
  --radius-surface: 24px; /* модалки, крупные блоки */
  --radius-pill: 999px;   /* бейджи, чипы, тумблер */

}