/*
 * TopBro — токены дизайн-системы.
 *
 * Источник: «Дизайн-система/Barbershop Design System.dc.html», версия 1.0,
 * блок `renderVals()` — нейтральная шкала, токены назначения, статусные цвета,
 * состояния слота, типографическая шкала, шкала интервалов, радиусы, границы,
 * варианты кнопок и состояния полей ввода.
 *
 * Значения перенесены как есть. Ничего не подобрано и не пересчитано: чего
 * в дизайн-системе нет, того нет и здесь.
 */

:root {
  /* ─── Нейтральная шкала ──────────────────────────────────────────────────
   * База палитры. В разметке напрямую не используется: на неё ссылаются
   * смысловые токены ниже — так же, как в самой дизайн-системе.
   */
  --neutral-900: #0A0A0A; /* Почти чёрный */
  --neutral-800: #171717; /* Уголь */
  --neutral-700: #262626; /* Графит */
  --neutral-600: #3D3D3D; /* Тёмно-серый */
  --neutral-500: #595959; /* Серый */
  --neutral-400: #787878; /* Средне-серый */
  --neutral-300: #9C9C9C; /* Светло-серый */
  --neutral-200: #C4C4C4; /* Серебристый */
  --neutral-100: #E6E6E6; /* Дымчатый */
  --neutral-0:   #FFFFFF; /* Белый */

  /* ─── Поверхности и текст ─────────────────────────────────────────────── */
  --color-background:      var(--neutral-0);   /* Фон страницы */
  --color-surface:         var(--neutral-0);   /* Карточки и панели, отделяются границей */
  --color-surface-inverse: var(--neutral-900); /* Шапка, подвал, тёмные блоки */
  --color-text-primary:    var(--neutral-900); /* Основной текст на светлом фоне */
  --color-text-secondary:  var(--neutral-500); /* Вторичный текст, подписи */
  --color-text-inverse:    var(--neutral-0);   /* Текст на тёмном фоне */

  /* Вторичный текст на инверсной поверхности — из демонстрации тёмного блока. */
  --color-text-secondary-inverse: var(--neutral-300);

  /* ─── Границы ─────────────────────────────────────────────────────────── */
  --color-border:       var(--neutral-100); /* Границы и разделители */
  --color-border-focus: var(--neutral-900); /* Поле в фокусе */
  --border-width:       1px;                /* Тонкая */
  --border-width-accent: 2px;               /* Акцентная */

  /* ─── Статусы ─────────────────────────────────────────────────────────── */
  --color-success:    #1E8E5A; /* Подтверждено */
  --color-success-bg: #E7F5EE;
  --color-warning:    #B8791A; /* Ожидает */
  --color-warning-bg: #FBF1E1;
  --color-error:      #D13B3B; /* Отменено / ошибка */
  --color-error-bg:   #FBEAEA;
  --color-info:       #2F6FEB; /* Информационное сообщение */
  --color-info-bg:    #EAF1FD;

  /* ─── Кнопка: основное действие ───────────────────────────────────────── */
  --button-primary-bg:              var(--neutral-900);
  --button-primary-text:            var(--neutral-0);
  --button-primary-bg-hover:        var(--neutral-700);
  --button-primary-bg-active:       var(--neutral-800);
  --button-primary-bg-disabled:     var(--neutral-100);
  --button-primary-text-disabled:   var(--neutral-300);

  /* ─── Кнопка: второстепенное действие ─────────────────────────────────── */
  --button-secondary-bg:            var(--neutral-0);
  --button-secondary-text:          var(--neutral-900);
  --button-secondary-border:        var(--neutral-900);
  --button-secondary-bg-hover:      #F5F5F5;
  --button-secondary-bg-active:     var(--neutral-100);
  --button-secondary-text-disabled: var(--neutral-200);
  --button-secondary-border-disabled: var(--neutral-100);

  /* ─── Кнопка без фона ─────────────────────────────────────────────────── */
  --button-ghost-bg:            transparent;
  --button-ghost-text:          var(--neutral-900);
  --button-ghost-bg-hover:      #F5F5F5;
  --button-ghost-bg-active:     var(--neutral-100);
  --button-ghost-text-disabled: var(--neutral-200);

  /* ─── Кнопка разрушительного действия ─────────────────────────────────── */
  --button-danger-bg:          var(--color-error);
  --button-danger-text:        var(--neutral-0);
  --button-danger-bg-hover:    #B93030;
  --button-danger-bg-active:   #9C2828;
  --button-danger-bg-disabled: #F3CFCF;
  --button-danger-text-disabled: var(--neutral-0);

  /* ─── Кнопка: размеры ─────────────────────────────────────────────────── */
  --button-radius:        999px;
  --button-padding-l:     16px 32px;
  --button-font-size-l:   16px;
  --button-padding-m:     12px 24px;
  --button-font-size-m:   15px;
  --button-padding-s:     8px 16px;
  --button-font-size-s:   13px;

  /* ─── Поле ввода ──────────────────────────────────────────────────────── */
  --field-bg:            var(--neutral-0);
  --field-text:          var(--neutral-900);
  --field-border:        var(--color-border);
  --field-border-focus:  var(--color-border-focus);
  --field-border-error:  var(--color-error);
  --field-border-success: var(--color-success);
  --field-bg-disabled:   #F5F5F5;
  --field-text-disabled: var(--neutral-200);
  --field-text-error:    var(--color-error);   /* Подпись под полем */
  --field-text-success:  var(--color-success); /* Подпись под полем */
  --field-padding:       12px 14px;
  --field-font-size:     14px;
  --field-radius:        6px;

  /* ─── Состояния слота времени ─────────────────────────────────────────── */
  --slot-free-bg:            var(--neutral-0);
  --slot-free-border:        var(--neutral-200);
  --slot-free-text:          var(--neutral-900);
  --slot-busy-bg:            var(--neutral-100);
  --slot-busy-border:        var(--neutral-100);
  --slot-busy-text:          var(--neutral-300);
  --slot-selected-bg:        var(--neutral-900);
  --slot-selected-border:    var(--neutral-900);
  --slot-selected-text:      var(--neutral-0);
  --slot-unavailable-bg:     #F5F5F5;
  --slot-unavailable-border: var(--neutral-100);
  --slot-unavailable-text:   var(--neutral-200);

  /* ─── Шрифт ───────────────────────────────────────────────────────────── */
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-bold:    700;

  /* ─── Размеры текста ──────────────────────────────────────────────────── */
  --text-display-size: 72px;
  --text-display-line: 1.05;
  --text-display-weight: 700;
  --text-display-tracking: -0.02em;

  --text-h1-size: 48px;
  --text-h1-line: 1.1;
  --text-h1-weight: 700;
  --text-h1-tracking: -0.01em;

  --text-h2-size: 36px;
  --text-h2-line: 1.15;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.01em;

  --text-h3-size: 28px;
  --text-h3-line: 1.2;
  --text-h3-weight: 600;
  --text-h3-tracking: -0.005em;

  --text-h4-size: 22px;
  --text-h4-line: 1.25;
  --text-h4-weight: 600;
  --text-h4-tracking: 0em;

  --text-body-l-size: 18px;
  --text-body-l-line: 1.5;
  --text-body-l-weight: 400;
  --text-body-l-tracking: 0em;

  --text-body-m-size: 16px;
  --text-body-m-line: 1.5;
  --text-body-m-weight: 400;
  --text-body-m-tracking: 0em;

  --text-body-s-size: 14px;
  --text-body-s-line: 1.5;
  --text-body-s-weight: 400;
  --text-body-s-tracking: 0em;

  --text-caption-size: 12px;
  --text-caption-line: 1.4;
  --text-caption-weight: 600;
  --text-caption-tracking: 0.04em;

  --text-button-size: 15px;
  --text-button-line: 1;
  --text-button-weight: 600;
  --text-button-tracking: 0.01em;

  /* ─── Отступы ─────────────────────────────────────────────────────────── */
  --space-1: 4px;  /* базовый шаг */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Сетка: контейнер 1280px, 12 колонок, гаттер 24px, поля 64px (десктоп). */
  --container-max-width: 1280px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --page-padding: 64px;

  /* ─── Скругления ──────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 999px;
}