/**
 * REALWAVE — Дизайн-токены (design tokens)
 * Источник истины: improvements/00_Редизайн_REALWAVE/ДИЗАЙН-СИСТЕМА.md
 *
 * Подключается ПЕРЕД realwave-ui.css, задаёт палитру/типографику/отступы/тени.
 * Переопределяет дефолтные Битрикс-токены (--theme-color-primary и т.д.) так,
 * чтобы все существующие компоненты (кнопки, ссылки, badges) мгновенно
 * перекрасились в новую палитру REALWAVE.
 *
 * Секция 1 из 6 редизайна. 2026-06-21.
 */

:root {
	/* ============================================================
	 * 1. ЦВЕТ — нейтральная премиум-база (чернила на белом)
	 * ============================================================ */
	--rw-ink:           #1A1D21;  /* основной текст, заголовки, иконки */
	--rw-ink-soft:      #4A5057;  /* вторичный текст, описания */
	--rw-ink-muted:     #8A9099;  /* метаданные, подписи, placeholder */
	--rw-bg:            #FFFFFF;  /* основной белый фон страницы */
	--rw-bg-alt:        #F6F7F8;  /* чередующиеся блоки, сайдбар */
	--rw-bg-hover:      #F0F2F4;  /* hover-состояния */
	--rw-line:          #E4E7EB;  /* рамки, разделители */
	--rw-line-soft:     #EEF0F2;  /* тонкие разделители */

	/* ============================================================
	 * 2. ЦВЕТ — акцент (energetic CTA, индиго-синий = надёжность B2B)
	 * ============================================================ */
	--rw-accent:        #2B4BFF;  /* CTA-кнопки, активные ссылки, чекбоксы */
	--rw-accent-hover:  #1E3ACC;  /* pressed/hover кнопок */
	--rw-accent-bg:     #EBEFFF;  /* подсветка, выделенные блоки, badge-фон */
	--rw-dark:          #16181C;  /* шапка, футер, тёмные секции */

	/* ============================================================
	 * 3. ЦВЕТ — семантический (цена/скидка/наличие/предупреждение)
	 * ============================================================ */
	--rw-price:         #E5283A;  /* оптовая цена, % скидки, badge Sale */
	--rw-price-old:     #A0A4AB;  /* зачёркнутая розничная цена */
	--rw-success:       #2E9E5B;  /* "В наличии", подтверждения */
	--rw-warning:       #E8920C;  /* "Мало", предупреждения */
	--rw-wholesale-bg:  #1A1D21;  /* чёрный badge "ОПТ" */

	/* ============================================================
	 * 4. ТИПОГРАФИКА
	 * ============================================================ */
	--rw-font-sans: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont,
	                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--rw-fs-display:    2.75rem;  /* 44px — H1 главной, заголовки баннеров */
	--rw-fs-h1:         2rem;     /* 32px — заголовок раздела каталога */
	--rw-fs-h2:         1.5rem;   /* 24px — "Новинки", "Категории" */
	--rw-fs-h3:         1.25rem;  /* 20px — подзаголовки, карточка товара */
	--rw-fs-h4:         1.0625rem;/* 17px — мелкие заголовки */
	--rw-fs-body:       1rem;     /* 16px — основной текст */
	--rw-fs-small:      0.875rem; /* 14px — описания, метаданные */
	--rw-fs-micro:      0.75rem;  /* 12px — badges, лейблы, счётчики */
	--rw-fs-price:      1.375rem; /* 22px — оптовая цена в карточке */
	--rw-fs-price-card: 1rem;     /* 16px — цена в карточке каталога */

	--rw-lh-tight:  1.2;          /* заголовки */
	--rw-lh-body:   1.5;          /* текст */
	--rw-lh-loose:  1.65;         /* длинный текст / статьи */

	--rw-fw-regular: 400;
	--rw-fw-medium:  500;
	--rw-fw-semibold:600;
	--rw-fw-bold:    700;
	--rw-fw-extrabold:800;

	/* ============================================================
	 * 5. ОТСТУПЫ (4px-база)
	 * ============================================================ */
	--rw-space-1:  4px;
	--rw-space-2:  8px;
	--rw-space-3:  12px;
	--rw-space-4:  16px;
	--rw-space-5:  20px;
	--rw-space-6:  24px;
	--rw-space-8:  32px;
	--rw-space-10: 40px;
	--rw-space-12: 48px;
	--rw-space-16: 64px;
	--rw-space-20: 80px;
	--rw-space-24: 96px;

	/* ============================================================
	 * 6. КОНТЕЙНЕР И СЕТКА
	 * ============================================================ */
	--rw-container:        1280px;  /* max-width контента */
	--rw-container-narrow: 760px;   /* текстовые страницы */
	--rw-gutter:           var(--rw-space-4);  /* боковые отступы, mobile */

	/* ============================================================
	 * 7. РАДИУСЫ
	 * ============================================================ */
	--rw-radius-sm:   6px;
	--rw-radius:      10px;
	--rw-radius-lg:   16px;
	--rw-radius-pill: 999px;

	/* ============================================================
	 * 8. ТЕНИ (мягкие, премиальные)
	 * ============================================================ */
	--rw-shadow-xs: 0 1px 2px rgba(16,18,22,0.04);
	--rw-shadow-sm: 0 2px 8px rgba(16,18,22,0.06);
	--rw-shadow:    0 6px 20px rgba(16,18,22,0.08);
	--rw-shadow-lg: 0 12px 40px rgba(16,18,22,0.12);

	/* ============================================================
	 * 9. ПЕРЕХОДЫ (волна = плавность)
	 * ============================================================ */
	--rw-ease:            cubic-bezier(0.4, 0.0, 0.2, 1);
	--rw-duration-fast:   0.15s;
	--rw-duration:        0.25s;

	/* ============================================================
	 * 10. ИКОНКИ
	 * ============================================================ */
	--rw-icon-sm: 16px;
	--rw-icon:    20px;
	--rw-icon-lg: 24px;

	/* ============================================================
	 * 11. Z-INDEX (управление слоями)
	 * ============================================================ */
	--rw-z-header:  1000;
	--rw-z-dropdown: 1020;
	--rw-z-sticky:  1030;
	--rw-z-modal:   1050;
	--rw-z-toast:   1080;
}

/* ============================================================
 * ПЕРЕОПРЕДЕЛЕНИЕ БИТРИКС-ТОКЕНОВ → новая палитра REALWAVE
 * Все темы (blue/green/yellow/red) теперь единый индиго-акцент.
 * Существующие компоненты eshop (кнопки .btn-primary, ссылки,
 * badges) перекрашиваются автоматически без правки их разметки.
 * ============================================================ */
.bx-yellow, .bx-theme-yellow,
.bx-blue,   .bx-theme-blue,
.bx-green,  .bx-theme-green,
.bx-red,    .bx-theme-red {
	--primary:                var(--rw-accent);
	--theme-color-primary:    var(--rw-accent);
	--theme-color-second:     var(--rw-accent-hover);
	--theme-color-light:      var(--rw-accent-bg);

	--theme-b-link:           var(--rw-accent);
	--theme-b-link-hover:     var(--rw-accent-hover);

	--theme-b-tx-primary:           #FFFFFF;
	--theme-b-bg-primary:           var(--rw-accent);
	--theme-b-bd-primary:           var(--rw-accent);
	--theme-b-sd-primary:           rgba(43, 75, 255, 0.35);

	--theme-b-tx-primary-hover:     #FFFFFF;
	--theme-b-bg-primary-hover:     var(--rw-accent-hover);
	--theme-b-bd-primary-hover:     var(--rw-accent-hover);

	--theme-b-tx-primary-active:    #FFFFFF;
	--theme-b-bg-primary-active:     var(--rw-accent-hover);
	--theme-b-bd-primary-active:     var(--rw-accent-hover);

	--theme-b-tx-primary-disabled:  #FFFFFF;
	--theme-b-bg-primary-disabled:   #8A9099;
	--theme-b-bd-primary-disabled:   #8A9099;
}

/* ============================================================
 * БАЗОВЫЕ ГЛОБАЛЫ — применяем токены к body и тексту
 * ============================================================ */
html {
	font-size: 16px; /* фиксируем базу rem */
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--rw-font-sans);
	color: var(--rw-ink);
	background-color: var(--rw-bg);
	line-height: var(--rw-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Ссылки по умолчанию — спокойные, не кричащие */
a {
	color: var(--rw-ink);
	transition: color var(--rw-duration-fast) var(--rw-ease);
}
a:hover {
	color: var(--rw-accent);
}

/* Доступность: видимый focus-ring на клавиатурной навигации */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--rw-accent);
	outline-offset: 2px;
	border-radius: var(--rw-radius-sm);
}

/* ============================================================
 * КНОПКИ — унификация под REALWAVE
 * .btn-primary → акцент; .btn-default → secondary (контур)
 * ============================================================ */
.bx-theme-green .btn.btn-default,
.bx-theme-blue .btn.btn-default,
.bx-theme-yellow .btn.btn-default,
.bx-theme-red .btn.btn-default,
.btn.btn-default {
	border: 1px solid var(--rw-line);
	background-color: var(--rw-bg);
	color: var(--rw-ink);
	border-radius: var(--rw-radius);
	font-weight: var(--rw-fw-semibold);
	transition: background-color var(--rw-duration-fast) var(--rw-ease),
	            border-color var(--rw-duration-fast) var(--rw-ease),
	            color var(--rw-duration-fast) var(--rw-ease);
}
.bx-theme-green .btn.btn-default:hover,
.bx-theme-blue .btn.btn-default:hover,
.bx-theme-yellow .btn.btn-default:hover,
.bx-theme-red .btn.btn-default:hover,
.btn.btn-default:hover {
	border-color: var(--rw-accent);
	background-color: var(--rw-accent-bg);
	color: var(--rw-accent);
}

.btn-primary {
	background-color: var(--rw-accent);
	border-color: var(--rw-accent);
	color: #FFFFFF;
	border-radius: var(--rw-radius);
	font-weight: var(--rw-fw-semibold);
	transition: background-color var(--rw-duration-fast) var(--rw-ease),
	            border-color var(--rw-duration-fast) var(--rw-ease),
	            box-shadow var(--rw-duration-fast) var(--rw-ease);
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--rw-accent-hover);
	border-color: var(--rw-accent-hover);
	color: #FFFFFF;
	box-shadow: var(--rw-shadow-sm);
}

/* ============================================================
 * УСИЛЕНИЕ БАЗОВЫХ ПРАВИЛ — перебиваем конфликтующие стили
 * realwave-ui.css (блок 05) задаёт body.bx-background-image фон/цвет,
 * что перебивает обычный body{...}. Повышаем специфичность.
 * ============================================================ */
body.bx-background-image,
body.bx-theme-green,
body.bx-theme-blue,
body.bx-theme-yellow,
body.bx-theme-red {
	background-color: var(--rw-bg) !important;
	background-image: none !important;
	color: var(--rw-ink) !important;
	font-family: var(--rw-font-sans) !important;
	line-height: var(--rw-lh-body) !important;
}

/* Убираем дефолтный голубоватый фон-обёртку Битрикса, оставляем чистый белый */
.bx-wrapper,
#bx_eshop_wrap {
	background-color: var(--rw-bg) !important;
}

/* Типографика заголовков под REALWAVE */
h1, h2, h3, h4, h5, h6 {
	color: var(--rw-ink);
	font-weight: var(--rw-fw-bold);
	line-height: var(--rw-lh-tight);
}
h1 { font-size: var(--rw-fs-h1); }
h2 { font-size: var(--rw-fs-h2); }
h3 { font-size: var(--rw-fs-h3); }
h4 { font-size: var(--rw-fs-h4); }

/* Ссылки внутри контента — спокойные, не кислотные */
.bx-wrapper a {
	color: var(--rw-ink);
}
.bx-wrapper a:hover {
	color: var(--rw-accent);
}