/*
 * Токены дизайн-системы TopBro.
 *
 * Собрано из прототипа, ничего не добавлено от себя:
 *   prototype_disign/Tokens.dc.html      — цвета, семантика, статусы слотов
 *   prototype_disign/Typography.dc.html  — шрифты и шкала текста
 *   prototype_disign/Grid.dc.html        — отступы, скругления, тени, контейнер
 *   prototype_disign/Components.dc.html  — кнопки, поля, границы, иконки
 *   prototype_disign/Guidelines.dc.html  — правила доступности
 *
 * Значения перенесены как есть. Имена даны по роли, а не по цвету: тот же
 * #F2569E зовётся акцентом, а не «розовым», — иначе смена цвета однажды
 * оставит в коде переменную --pink со значением синего.
 *
 * Чего в дизайн-системе нет и что здесь поэтому не появилось — в конце файла.
 */

:root {
  /* ======================================================================
     ШРИФТЫ
     Два семейства, три роли (Typography, «Типографика»).
     ====================================================================== */

  /* Интерфейсные тексты, формы, таблицы — всё структурное. Manrope 400/500. */
  --font-text: 'Manrope', sans-serif;
  /* Крупные заголовки витрины и разделов. Manrope 700/800, прописные. */
  --font-headline: 'Manrope', sans-serif;
  /* Только надсловия витрины и акцентные фразы. Кириллицу не поддерживает,
     поэтому фразы остаются на латинице. Никогда в кнопках, полях, таблицах
     и статус-текстах. */
  --font-decorative: 'Parisienne', cursive;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ======================================================================
     РАЗМЕРЫ ТЕКСТА
     Шкала из Typography: десктоп / мобильный, начертание, интерлиньяж, трекинг.
     ====================================================================== */

  /* Display — «Скидка 30%» */
  --text-display: 56px;
  --text-display-mobile: 34px;
  --text-display-weight: 800;
  --text-display-line-height: 1.05;
  --text-display-tracking: 0.01em;

  /* H1 — «Запись к мастеру» */
  --text-h1: 40px;
  --text-h1-mobile: 28px;
  --text-h1-weight: 800;
  --text-h1-line-height: 1.1;
  --text-h1-tracking: 0.01em;

  /* H2 — «Наши услуги» */
  --text-h2: 30px;
  --text-h2-mobile: 22px;
  --text-h2-weight: 700;
  --text-h2-line-height: 1.15;
  --text-h2-tracking: 0.005em;

  /* H3 — имя мастера */
  --text-h3: 24px;
  --text-h3-mobile: 19px;
  --text-h3-weight: 700;
  --text-h3-line-height: 1.2;
  --text-h3-tracking: 0;

  /* H4 — название услуги */
  --text-h4: 18px;
  --text-h4-mobile: 16px;
  --text-h4-weight: 600;
  --text-h4-line-height: 1.3;
  --text-h4-tracking: 0;

  /* Body L — вводные абзацы витрины */
  --text-body-l: 17px;
  --text-body-l-mobile: 16px;
  --text-body-l-weight: 400;
  --text-body-l-line-height: 1.6;
  --text-body-l-tracking: 0;

  /* Body M — основной текст интерфейса */
  --text-body-m: 15px;
  --text-body-m-mobile: 14px;
  --text-body-m-weight: 400;
  --text-body-m-line-height: 1.55;
  --text-body-m-tracking: 0;

  /* Body S — уточнения: длительность, состав услуги */
  --text-body-s: 13px;
  --text-body-s-mobile: 13px;
  --text-body-s-weight: 400;
  --text-body-s-line-height: 1.5;
  --text-body-s-tracking: 0;

  /* Caption — подписи и метки времени */
  --text-caption: 12px;
  --text-caption-mobile: 12px;
  --text-caption-weight: 500;
  --text-caption-line-height: 1.4;
  --text-caption-tracking: 0.01em;

  /* Label — подписи полей формы, прописные */
  --text-label: 12px;
  --text-label-mobile: 12px;
  --text-label-weight: 700;
  --text-label-line-height: 1.3;
  --text-label-tracking: 0.06em;

  /* Button — надпись на кнопке, прописные */
  --text-button: 13px;
  --text-button-mobile: 13px;
  --text-button-weight: 700;
  --text-button-line-height: 1;
  --text-button-tracking: 0.08em;

  /* ======================================================================
     ОТСТУПЫ
     Базовая единица 8px во всей системе (Grid, «Шкала отступов»).
     Имя переменной равно значению — шкала в дизайн-системе задана числами,
     а не ролями, и придумывать роли за неё не нужно.
     ====================================================================== */

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* ======================================================================
     СКРУГЛЕНИЯ
     Прямые края для кнопок и крупных блоков; лёгкое скругление только
     у карточек, аватаров и чипов (Grid, «Радиусы скругления»).
     ====================================================================== */

  --radius-none: 0px;   /* кнопки, hero-блоки */
  --radius-sm: 6px;     /* карточки, поля, модалки */
  --radius-md: 12px;    /* крупные фото-карточки */
  --radius-full: 999px; /* аватары, чипы, теги */

  /* Расхождение внутри дизайн-системы: Grid относит кнопки к radius-none,
     а в библиотеке компонентов у всех кнопок border-radius: 2px. Оба
     значения оставлены как есть, выбор — за тем, кто верстает. */
  --radius-button-components: 2px;

  /* ======================================================================
     ТЕНИ И ФОКУС (Grid, «Тени и фокус»)
     ====================================================================== */

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.45);
  /* Видимое кольцо фокуса обязательно у каждого интерактивного элемента;
     outline: none без замены запрещён (Guidelines, «Доступность»). */
  --focus-ring: 0 0 0 3px rgba(242, 86, 158, 0.45);
  --focus-ring-danger: 0 0 0 3px rgba(229, 72, 77, 0.4);

  /* ======================================================================
     ПАЛИТРА
     Сырые значения. Роли — ниже, ими и пользоваться.
     ====================================================================== */

  /* Поверхности тёмной темы — витрина */
  --palette-dark-base: #221E28;    /* фон страницы */
  --palette-dark-surface: #2E2935; /* секции, панели */
  --palette-dark-card: #3A3441;    /* поднятые карточки, модалки */

  /* Поверхности светлой темы — рабочие экраны: кабинет клиента и админка */
  --palette-light-base: #F7F6F8;    /* фон страницы */
  --palette-light-surface: #ECE9EF; /* строки таблиц, боковая навигация */
  --palette-light-card: #FFFFFF;    /* поднятые карточки, модалки */

  /* Акцент — единственный акцентный цвет продукта. Второй бренд-акцент
     вводить нельзя, и акцент не означает «опасность» (Guidelines). */
  --palette-accent: #F2569E;
  --palette-accent-hover: #E23F8C;
  --palette-accent-pressed: #C22F76;
  --palette-accent-subtle-10: rgba(242, 86, 158, 0.10);
  --palette-accent-subtle-15: rgba(242, 86, 158, 0.15);

  /* Текст тёмной темы */
  --palette-text-dark-primary: #F7F5F8;
  --palette-text-dark-secondary: #C9C3D0;
  --palette-text-dark-muted: #A6A0AE;

  /* Текст светлой темы */
  --palette-text-light-primary: #221E28;
  --palette-text-light-secondary: #55505E;
  --palette-text-light-muted: #8A8492; /* 3.4:1 — только лейблы, иконки,
                                          подписи; не основной текст */

  /* Семантика. Первое значение — заливка и иконка, второе — тот же смысл
     текстом на светлом фоне, где заливка не проходит по контрасту. */
  --palette-success: #3FB876;
  --palette-success-on-light: #137A46;
  --palette-warning: #E3A73B;
  --palette-warning-on-light: #9A6412;
  --palette-danger: #E5484D;
  --palette-danger-on-dark: #F0707A;
  --palette-danger-on-light: #C22C35;
  --palette-info: #4EA1E8;
  --palette-info-on-light: #1D6FB0;

  /* ======================================================================
     РОЛИ — ТЁМНАЯ ТЕМА (по умолчанию)
     Витрина: лендинг, каталоги, визард записи, служебные экраны.
     ====================================================================== */

  --color-bg-page: var(--palette-dark-base);
  --color-bg-surface: var(--palette-dark-surface);
  --color-bg-card: var(--palette-dark-card);

  --color-text-primary: var(--palette-text-dark-primary);
  --color-text-secondary: var(--palette-text-dark-secondary);
  --color-text-muted: var(--palette-text-dark-muted);
  /* Текст на светлом фоне и на розовых заливках, не на тёмном. */
  --color-text-inverse: #221E28;
  /* Взято из разметки компонентов (отключённое поле, прошедший слот),
     именованного токена под это в дизайн-системе нет. */
  --color-text-disabled: #615A6A;

  --color-accent: var(--palette-accent);
  --color-accent-hover: var(--palette-accent-hover);
  --color-accent-pressed: var(--palette-accent-pressed);
  --color-accent-subtle: var(--palette-accent-subtle-10);
  --color-accent-selected: var(--palette-accent-subtle-15);
  --color-text-on-accent: #221E28;         /* 5.1:1 AA на default */
  --color-text-on-accent-pressed: #FFFFFF; /* 5.3:1 AA на pressed */
  /* Акцент текстом — ссылки и активные пункты навигации. На тёмном берётся
     сам акцент, как в навигации страниц дизайн-системы; на светлом он по
     контрасту не проходит, там своё значение — см. светлую тему. */
  --color-accent-text: var(--palette-accent);

  /* Заливка и иконка — одна на обе темы: светлых вариантов заливки
     дизайн-система не даёт. Текстовые значения различаются, см. ниже. */
  --color-success: var(--palette-success);
  --color-warning: var(--palette-warning);
  --color-danger: var(--palette-danger);
  --color-info: var(--palette-info);

  /* Тот же смысл текстом. На тёмном сам цвет заливки проходит по контрасту
     у всех, кроме danger, — ему дизайн-система даёт отдельный светлый тон. */
  --color-success-text: var(--palette-success);
  --color-warning-text: var(--palette-warning);
  --color-danger-text: var(--palette-danger-on-dark);
  --color-info-text: var(--palette-info);

  /* Границы. Именованных токенов границы в дизайн-системе нет — значения
     взяты из разметки компонентов, где они повторяются без исключений. */
  --color-border-divider: rgba(255, 255, 255, 0.08); /* разделители, шапка */
  --color-border-field: rgba(255, 255, 255, 0.14);   /* поля ввода, слоты */
  --color-border-control: rgba(255, 255, 255, 0.3);  /* вторичная кнопка,
                                                        чекбокс, радио */
  --color-border-disabled: rgba(255, 255, 255, 0.08);

  /* ======================================================================
     КНОПКИ (Components, «Кнопки»)
     ====================================================================== */

  --button-height-s: 36px;
  --button-height-m: 44px;
  --button-height-l: 52px;

  --button-padding-s: 9px 14px;
  --button-padding-m: 13px 20px;
  --button-padding-l: 17px 28px;

  /* Размер надписи в библиотеке компонентов. Шкала Typography для роли
     Button называет 13px — расхождение внутри дизайн-системы, оба значения
     оставлены. */
  --button-text-s: 11px;
  --button-text-m: 12px;
  --button-text-l: 13px;

  /* Основная — единственное сильное действие на экране */
  --button-primary-bg: var(--palette-accent);
  --button-primary-bg-hover: var(--palette-accent-hover);
  --button-primary-text: #221E28;
  --button-primary-bg-disabled: rgba(242, 86, 158, 0.3);
  --button-primary-text-disabled: rgba(34, 30, 40, 0.5);

  /* Вторичная — обводка без заливки */
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: rgba(255, 255, 255, 0.06);
  --button-secondary-text: #F7F5F8;
  --button-secondary-border: rgba(255, 255, 255, 0.3);
  --button-secondary-border-hover: rgba(255, 255, 255, 0.4);
  --button-secondary-text-disabled: rgba(255, 255, 255, 0.3);
  --button-secondary-border-disabled: rgba(255, 255, 255, 0.12);

  /* Ghost — «Отмена», отступление из сценария */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(255, 255, 255, 0.06);
  --button-ghost-text: #C9C3D0;
  --button-ghost-text-hover: #F7F5F8;
  --button-ghost-text-disabled: rgba(201, 195, 208, 0.4);

  /* Деструктивная — удаление и отмена записи */
  --button-danger-bg: transparent;
  --button-danger-bg-hover: var(--palette-danger);
  --button-danger-text: var(--palette-danger-on-dark);
  --button-danger-text-hover: #221E28;
  --button-danger-border: var(--palette-danger);
  --button-danger-text-disabled: rgba(240, 112, 122, 0.35);
  --button-danger-border-disabled: rgba(229, 72, 77, 0.3);

  /* ======================================================================
     ПОЛЯ ВВОДА (Components, «Поля ввода»)
     ====================================================================== */

  --field-bg: var(--palette-dark-surface);
  --field-bg-disabled: rgba(255, 255, 255, 0.03);
  --field-border: rgba(255, 255, 255, 0.14);
  --field-border-focus: var(--palette-accent);
  --field-border-error: var(--palette-danger);
  --field-border-disabled: rgba(255, 255, 255, 0.08);
  --field-text: #F7F5F8;
  --field-text-disabled: #615A6A;
  --field-text-error: var(--palette-danger-on-dark);
  --field-focus-ring: 0 0 0 3px rgba(242, 86, 158, 0.3);
  --field-padding: 13px 14px;
  --field-radius: var(--radius-sm);
  --field-text-size: 14px;

  /* ======================================================================
     СТАТУСЫ СЛОТОВ ВРЕМЕНИ (Tokens, «Токены статусов слотов времени»)
     Ядро статусной системы продукта. Каждый статус отличается заливкой,
     обводкой и прозрачностью — никогда только цветом (Guidelines).
     ====================================================================== */

  --slot-available-bg: #3A3441;
  --slot-available-border: rgba(255, 255, 255, 0.14);
  --slot-available-text: #F7F5F8;

  --slot-booked-bg: rgba(255, 255, 255, 0.04);
  --slot-booked-border: rgba(255, 255, 255, 0.08);
  --slot-booked-text: #A6A0AE;

  --slot-selected-bg: var(--palette-accent);
  --slot-selected-text: #221E28;
  --slot-selected-shadow: 0 4px 16px rgba(242, 86, 158, 0.35);

  --slot-my-booking-bg: rgba(242, 86, 158, 0.15);
  --slot-my-booking-border: var(--palette-accent);
  --slot-my-booking-text: #F7F5F8;

  --slot-past-bg: transparent;
  --slot-past-border: 1px dashed rgba(255, 255, 255, 0.1);
  --slot-past-text: #615A6A;

  --slot-pending-bg: rgba(227, 167, 59, 0.12);
  --slot-pending-border: 1px dashed var(--palette-warning);
  --slot-pending-text: var(--palette-warning);

  /* ======================================================================
     ИКОНКИ (Components, «Иконки»)
     Один линейный набор, одна толщина линии.
     ====================================================================== */

  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-stroke-width: 1.7px; /* при опорном размере 22px */

  /* ======================================================================
     СЕТКА И КОНТЕЙНЕР (Grid, «Брейкпоинты и контейнер»)
     ====================================================================== */

  --breakpoint-tablet: 600px;   /* планшет: 600–1023px */
  --breakpoint-desktop: 1024px; /* десктоп: 1024px+ */

  --container-max: 1160px;
  --container-gutter-mobile: 16px;
  --container-gutter-tablet: 24px;
  --container-gutter-desktop: 24px;

  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;

  /* Минимальная зона нажатия для кнопок, слотов и действий в строках
     таблицы, даже если видимый значок мельче (Guidelines). */
  --touch-target-min: 44px;
}

/* ========================================================================
   СВЕТЛАЯ ТЕМА — рабочие экраны
   Кабинет клиента и админка. Сплошные цвета поверхностей: без фотографий,
   градиентов и декоративных форм (Guidelines).
   ======================================================================== */

[data-theme='light'] {
  --color-bg-page: var(--palette-light-base);
  --color-bg-surface: var(--palette-light-surface);
  --color-bg-card: var(--palette-light-card);

  --color-text-primary: var(--palette-text-light-primary);
  --color-text-secondary: var(--palette-text-light-secondary);
  --color-text-muted: var(--palette-text-light-muted);
  /* --color-text-inverse не переопределяется: дизайн-система задаёт его
     единственным значением #221E28 — «на светлом фоне и на розовых
     заливках, не на тёмном». */

  /* На светлом фоне сам акцент по контрасту не проходит: для текста и ссылок
     дизайн-система даёт отдельное значение accent-text-on-light. */
  --color-accent-text: var(--palette-accent-pressed); /* 4.9:1 AA */

  /* Заливки остаются прежними, меняется только текст. */
  --color-success-text: var(--palette-success-on-light);
  --color-warning-text: var(--palette-warning-on-light);
  --color-danger-text: var(--palette-danger-on-light);
  --color-info-text: var(--palette-info-on-light);

  /* Как и в тёмной теме, именованных токенов границы нет — значения из
     разметки светлой рабочей области. */
  --color-border-divider: rgba(0, 0, 0, 0.06);
  --color-border-field: rgba(0, 0, 0, 0.1);
  --color-border-control: rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   ЧЕГО В ДИЗАЙН-СИСТЕМЕ НЕТ

   Ниже перечислено то, что переменными не стало, потому что значения в
   прототипе отсутствуют. Подбирать похожее нельзя: цвет, взятый «на глаз»,
   потом невозможно отличить от согласованного.

   1. Именованных токенов границы нет ни в тёмной, ни в светлой теме.
      Значения выше взяты из разметки компонентов, где повторяются
      устойчиво, но собственных имён в дизайн-системе у них не было.
   2. Кнопки, поля, чекбоксы и тумблеры показаны только на тёмном фоне.
      Как выглядит вторичная, ghost- и деструктивная кнопка на светлых
      рабочих экранах — не определено.
   3. Статусы слотов заданы только для тёмной темы. В админской сетке дня
      и в календаре кабинета фон светлый, значений под него нет.
   4. Бейджи статусов записи («Подтверждена», «Ожидает», «Отменена»,
      «Завершена») показаны в компонентах картинкой, но отдельных токенов
      заливки и текста под них не заведено.
   5. Токенов длительности и кривой анимации нет вовсе.
   6. Шкалы z-index нет.
   7. Тени заданы только для тёмной темы: на светлом фоне
      rgba(0,0,0,0.35) даст другой результат, а светлого варианта нет.
   8. #948C9D — самый частый серый в самих страницах дизайн-системы, но
      это оформление её собственных страниц, а не токен продукта: роль
      приглушённого текста закреплена за #A6A0AE. Поэтому переменной под
      #948C9D здесь нет.

   Два расхождения внутри самой дизайн-системы отмечены по месту:
   радиус кнопки (Grid — 0px, Components — 2px) и размер надписи на кнопке
   (Typography — 13px, Components — 12px).
   ======================================================================== */