/*
 * Токены дизайн-системы «Мастер Авто».
 * Источник — MasterAvtoDesignSystem.dc.html: разделы 01 (цвета), 02 (типографика),
 * 03 (отступы), 04 (радиусы), 06 (кнопки), 17 (токены для разработки).
 * Имена, которые есть в дизайн-системе, сохранены как есть.
 * Тёмная тема — по умолчанию, светлая включается атрибутом data-theme="light".
 */

:root {
  /* ---- Цвета: фон и поверхности ---- */
  --color-bg: #0B0B0A;                /* фон страницы */
  --color-surface: #161615;           /* карточки, панели, шапка */
  --color-surface-raised: #222221;    /* выпадашки, модалки */
  --color-surface-inverse: #FFFFFF;   /* «листы»: формы, календарь, таблицы */

  /* ---- Цвета: границы ---- */
  --color-border: #333332;            /* разделители, обводки карточек */
  --color-border-strong: #6B6B69;     /* обводки полей ввода */

  /* ---- Цвета: текст ---- */
  --color-text-primary: #F5F5F4;      /* заголовки и основной текст */
  --color-text-secondary: #B3B3B1;    /* описания, подписи */
  --color-text-muted: #8C8C8A;        /* вспомогательный текст, плейсхолдеры */
  --color-text-inverse: #0B0B0A;      /* текст на инверсной поверхности */

  /* ---- Цвета: акцент и фокус ---- */
  --color-accent: #E42320;            /* заливка CTA, выбранный слот */
  --color-accent-text: #FF5A4F;       /* красный текст и ссылки */
  --color-focus-ring: #FFFFFF;        /* фокус-ринг 2 px, отступ 2 px */

  /* ---- Цвета: главная кнопка (Primary) ---- */
  --color-button-bg: #E42320;
  --color-button-bg-hover: #C81E1B;
  --color-button-bg-active: #A8170F;
  --color-button-text: #FFFFFF;
  --color-button-disabled-bg: #333332;
  --color-button-disabled-text: #8C8C8A;

  /* ---- Цвета: ошибка ---- */
  --color-error: #C9245F;             /* base: заливка подтверждения удаления */
  --color-error-text: #FF7BA6;        /* текст ошибки под полем */
  --color-error-bg: #3A0F20;          /* подложка сообщения об ошибке */

  /* ---- Цвета: успех ---- */
  --color-success: #2E9E62;           /* base: иконки, полосы */
  --color-success-text: #5BD08E;
  --color-success-bg: #0D2418;

  /* ---- Шрифты ---- */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;  /* заголовки, метки, кнопки, цифры */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;    /* абзацы, поля ввода, описания */

  /* ---- Размеры текста: размер / межстрочный / трекинг ---- */
  --text-display-size: 64px;   --text-display-line: 1.05;  --text-display-tracking: -0.02em;
  --text-h1-size: 44px;        --text-h1-line: 1.1;        --text-h1-tracking: -0.01em;
  --text-h2-size: 32px;        --text-h2-line: 1.15;
  --text-h3-size: 24px;        --text-h3-line: 1.25;
  --text-h4-size: 20px;        --text-h4-line: 1.3;
  --text-body-l-size: 18px;    --text-body-l-line: 1.55;
  --text-body-size: 16px;      --text-body-line: 1.5;
  --text-body-s-size: 14px;    --text-body-s-line: 1.45;
  --text-label-size: 14px;     --text-label-line: 1.3;
  --text-button-size: 14px;    --text-button-line: 1;      --text-button-tracking: 0.06em;
  --text-overline-size: 12px;  --text-overline-line: 1.3;  --text-overline-tracking: 0.1em;
  --text-caption-size: 13px;   --text-caption-line: 1.4;

  /* Размеры на мобильном (у остальных стилей совпадают с десктопом) */
  --text-display-size-mobile: 36px;
  --text-h1-size-mobile: 30px;
  --text-h2-size-mobile: 24px;
  --text-h3-size-mobile: 20px;
  --text-h4-size-mobile: 18px;
  --text-body-l-size-mobile: 17px;

  /* ---- Отступы (шкала 4/8) ---- */
  --space-1: 4px;     /* иконка ↔ текст в бейдже */
  --space-2: 8px;     /* внутри чипов, между тегами */
  --space-3: 12px;    /* поле ↔ подсказка */
  --space-4: 16px;    /* паддинг карточки (mobile), gutter 360 */
  --space-5: 20px;
  --space-6: 24px;    /* паддинг карточки, gutter 768+ */
  --space-8: 32px;    /* между группами полей */
  --space-10: 40px;
  --space-12: 48px;   /* между блоками секции */
  --space-16: 64px;   /* между секциями (mobile) */
  --space-20: 80px;
  --space-24: 96px;   /* между секциями (desktop) */

  /* ---- Скругления ---- */
  --radius-0: 0;      /* кнопки, карточки */
  --radius-2: 2px;    /* поля, слоты, бейджи */
}

[data-theme="light"] {
  --color-bg: #F5F5F4;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-inverse: #0B0B0A;

  --color-border: #D4D4D2;
  --color-border-strong: #8C8C8A;

  --color-text-primary: #0B0B0A;
  --color-text-secondary: #4A4A48;
  --color-text-muted: #6B6B69;
  --color-text-inverse: #FFFFFF;

  --color-accent-text: #C41E1A;
  --color-focus-ring: #0B0B0A;

  --color-error-text: #B4134F;
  --color-error-bg: #FCE8EF;

  --color-success-text: #1D7A47;
  --color-success-bg: #E9F6EE;
}