/* ============================================================================
   ЛесОптТорг — Дизайн-токены
   tokens.css

   CSS-переменные. Меняешь здесь — меняется везде.
   Подключается ПЕРВЫМ, чтобы все остальные модули могли использовать var().
============================================================================ */

:root {
    /* ─────────── Цвета ─────────── */
    --color-brand:        #00ad5d;     /* Основной зелёный (CTA, ссылки) */
    --color-brand-dark:   #027b43;     /* Hover-состояние, тёмнее */
    --color-brand-darker: #026235;     /* Focus / active, ещё тёмнее */
    --color-brand-bg:     #017c43;     /* Градиент-конец на баннерах */
    --color-brand-light:  #f3f9f5;     /* Очень светлый фон (form-reassurance) */

    --color-text:         #304351;     /* Основной текст */
    --color-text-strong:  #111827;     /* Заголовки/важное (тёмно-серый) */
    --color-text-muted:   #4b5563;     /* Второстепенный текст */
    --color-text-light:   #6b7280;     /* Disabled текст */

    --color-bg:           #ffffff;     /* Фон */
    --color-bg-soft:      #f5f5f5;     /* Альтернативный фон */
    --color-bg-dark:      rgba(21, 67, 60, 0.82); /* Футер */

    --color-border:       #e5e7eb;     /* Стандартная граница */
    --color-border-soft:  #e6e8ea;     /* Светлая разделительная линия */
    --color-border-input: #d1d5db;     /* Граница инпутов */

    --color-accent-red:   #c11d1d;     /* Цена, акцент-распродажа */
    --color-accent-yellow:#e7b600;     /* Жёлтый акцент (квадрат свойства) */

    --color-overlay:      rgba(0, 173, 93, 0.04);  /* Очень лёгкий зелёный фон */
    --color-overlay-2:    rgba(0, 173, 93, 0.18);  /* Граница на лёгком фоне */
    --color-shadow:       rgba(48, 50, 51, 0.10);  /* Тень карточки */
    --color-shadow-hover: rgba(0, 173, 93, 0.12);  /* Тень при ховере */

    /* ─────────── Шрифты ─────────── */
    --font-base:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Веса */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ─────────── Размеры шрифтов (пресет A — спокойный) ─────────── */
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 16px;
    --text-md:   18px;
    --text-lg:   20px;

    --h1-size:    32px;
    --h2-size:    24px;
    --h3-size:    20px;
    --h4-size:    18px;

    /* Мобильные размеры (для @media max-width:768px) */
    --h1-size-mobile: 24px;
    --h2-size-mobile: 20px;
    --h3-size-mobile: 18px;

    /* Line-height */
    --line-tight:  1.25;
    --line-base:   1.4;
    --line-loose:  1.6;

    /* ─────────── Отступы ─────────── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ─────────── Радиусы ─────────── */
    --radius-sm:  3px;     /* Мелкие элементы (бейджи) */
    --radius-md:  6px;     /* Кнопки, инпуты */
    --radius-lg:  8px;     /* Карточки */
    --radius-xl:  12px;    /* Большие плитки */

    /* ─────────── Тени ─────────── */
    --shadow-sm: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 12px 0 rgba(48, 50, 51, 0.10);
    --shadow-lg: 0 4px 16px rgba(0, 173, 93, 0.12);

    /* ─────────── Переходы ─────────── */
    --transition-fast: 0.2s;
    --transition-base: 0.3s;
    --transition-slow: 0.5s;

    /* ─────────── Z-индексы ─────────── */
    --z-base:        1;
    --z-dropdown:    100;
    --z-sticky:      1000;
    --z-navbar:      9998;
    --z-navbar-fixed:9999;
    --z-modal-backdrop: 10049;
    --z-modal:       10050;
    --z-modal-dialog:10051;
    --z-modal-close: 10052;
}