/*
 * Дизайн-токены «Біопласт». Единственное место, где заданы цвета и «размеры дизайна».
 *   1. Семантические токены --oboi-* — светлая тема (по умолчанию) и тёмная ([data-theme="dark"]).
 *   2. Привязка палитры Blocksy (--theme-palette-color-1..8) к нашим токенам, чтобы вся тема подхватывала цвета.
 * Новый цвет или третья тема = правка только этого файла. В components.css цветов нет.
 */
html[data-theme="light"], :root {
  color-scheme: light;
  --oboi-accent:        #c58a2a;   /* кнопки, акценты */
  --oboi-accent-hover:  #a87118;
  --oboi-on-accent:     #1d1a16;   /* текст на акценте (почти чёрный: контраст 5,8, при наведении 4,2) */
  --oboi-text:          #4a443b;
  --oboi-heading:       #1d1a16;
  --oboi-border:        #e4dccd;
  --oboi-surface:       #f1ece3;   /* карточки, плашки */
  --oboi-bg:            #fbf9f5;   /* фон страницы */
  --oboi-bg-raised:     #ffffff;   /* шапка, поднятые блоки */
  --oboi-img-shadow:    0 10px 22px rgba(60, 45, 20, .30), 0 3px 7px rgba(60, 45, 20, .18);   /* небольшая тень под фото обоев */
  --oboi-lift:          linear-gradient(145deg, #fdfbf7 0%, #faf7f1 60%, #f4efe6 100%);   /* приподнятая карточка: свет сверху-слева, поэтому верх-лево светлее, низ-право темнее */
  --oboi-veil:          rgba(251, 249, 245, .84);   /* вуаль поверх фото в шапке категории */
  --oboi-sale:          #a8322a;   /* акционная цена (отличается от акцента кнопок), контраст 6,3 */
  --oboi-sale-badge:    #c8453b;   /* фон круглого ярлыка скидки (белый текст) */
  --oboi-shadow:        0 10px 30px rgba(60, 45, 20, .08);
  --oboi-shadow-hover:  6px 12px 28px rgba(60, 45, 20, .13), 2px 4px 10px rgba(60, 45, 20, .08), inset 1px 1px 0 rgba(255, 255, 255, .7);   /* карточка при наведении: мягкая тень */
}
html[data-theme="dark"] {
  color-scheme: dark;
  --oboi-accent:        #d4a24c;
  --oboi-accent-hover:  #e8bd6e;
  --oboi-on-accent:     #1d1a16;
  --oboi-text:          #b8b2a7;
  --oboi-heading:       #f3efe8;
  --oboi-border:        #2c2a27;
  --oboi-surface:       #1d1b19;
  --oboi-bg:            #0f0e0d;
  --oboi-bg-raised:     #171513;
  --oboi-img-shadow: none;   /* тёмная тема: без тени под фото обоев, карточками серий и образцами */
  --oboi-lift:          linear-gradient(145deg, #2a2724 0%, #232120 60%, #1d1b19 100%);
  --oboi-veil:          rgba(15, 14, 13, .80);
  --oboi-sale:          #ef7a70;
  --oboi-sale-badge:    #d1493f;
  --oboi-shadow:        0 10px 30px rgba(0, 0, 0, .45);
  --oboi-shadow-hover:  8px 14px 32px rgba(255, 238, 210, .08), 2px 5px 12px rgba(255, 238, 210, .05), inset 1px 1px 0 rgba(255, 255, 255, .08);   /* тёмная тема: тень светлая и мягкая */
}

/* Размеры дизайна: одинаковы в обеих темах */
:root {
  --oboi-radius:      16px;
  --oboi-radius-sm:   10px;
  --oboi-space-section: clamp(48px, 7vw, 96px);
  --oboi-space-gap:   clamp(16px, 2.5vw, 28px);
}

/* Привязка к палитре Blocksy: 1 акцент, 2 акцент при наведении, 3 текст, 4 заголовки, 5 границы, 6 плашки, 7 фон, 8 шапка/карточки */
html[data-theme] {
  --theme-palette-color-1: var(--oboi-accent);
  --theme-palette-color-2: var(--oboi-accent-hover);
  --theme-palette-color-3: var(--oboi-text);
  --theme-palette-color-4: var(--oboi-heading);
  --theme-palette-color-5: var(--oboi-border);
  --theme-palette-color-6: var(--oboi-surface);
  --theme-palette-color-7: var(--oboi-bg);
  --theme-palette-color-8: var(--oboi-bg-raised);
  --theme-button-text-initial-color: var(--oboi-on-accent);
  --theme-button-text-hover-color: var(--oboi-on-accent);
  --theme-button-background-initial-color: var(--oboi-accent);
  --theme-button-background-hover-color: var(--oboi-accent-hover);
}