/* КИБЕР Маркет — токены дизайн-системы.
   Основа — токены КИБЕР ИИ Платформы (web/src/index.css, frontend/ui/kiber.css): тот же бренд, цвета и шрифт.
   Добавлено для магазина: цена и скидка, рейтинг, наличие, бейджи товара, сетка каталога.
   Светлая тема по умолчанию; тёмная — html[data-theme="dark"] или системная настройка.
   Правило: в вёрстке только var(--…), никаких литеральных цветов и размеров. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic-opsz.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-opsz.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Поверхности */
  --bg: #F3F6F6;          /* фон страницы */
  --bg-alt: #EAF0F0;      /* чередование секций, подложка фильтров */
  --surface: #FFFFFF;     /* карточки, панели */
  --surface2: #F8FAFA;    /* вторичная подложка внутри карточки, фото товара */
  /* Текст */
  --text: #0F2028;        /* основной, 15.9:1 на --surface */
  --text2: #344A51;       /* вторичный, 9.4:1 */
  --muted: #4C6066;       /* подписи, плейсхолдеры, 6.6:1 */
  /* Бренд: один акцент — только для действий */
  --accent: #0B7A6E;      /* заливка кнопок, белый текст 5.3:1 */
  --accent-hover: #065F4A;
  --accent-ink: #066B50;  /* акцентный текст и ссылки, 6.3:1 */
  --accent-soft: rgba(22,202,136,.14); /* тонированная подложка: выбранный фильтр, «в корзине» */
  --on-soft: #066B50;     /* текст на --accent-soft */
  --brand: #16CA88;       /* фирменный зелёный — логотип и иллюстрации, не текст */
  --brand-deep: #22404F;  /* фон логотипа, тёмные промо-блоки */
  /* Линии и заливки */
  --line: rgba(15,32,40,.08);
  --line2: rgba(15,32,40,.15);   /* границы полей */
  --control-border: rgba(15,32,40,.42); /* пустой флажок/радио, ≥3:1 */
  --fill: rgba(15,32,40,.045);   /* hover строки, серая кнопка */
  --fill-strong: rgba(15,32,40,.085);
  /* Магазин */
  --price: var(--text);
  --price-old: var(--muted);     /* зачёркнутая цена */
  --sale: #B42318;               /* скидка, 6.5:1 на белом; текст на --sale-soft 5.6:1 */
  --sale-soft: #FDECEA;
  --rating: #C47A00;             /* звёзды — графика, 3.3:1 */
  --stock-ok: #066B50;           /* «В наличии» — тот же оттенок, что --accent-ink */
  --stock-low: #8A5E00;          /* «Осталось мало», 5.6:1 */
  --stock-none: var(--muted);
  --badge-new: #1F5FAF;          /* «Новинка», 6.4:1 */
  --badge-new-soft: #E7F0FB;
  --danger: #B42318;
  --warn: #8A5E00;
  --info: #1F5FAF;
  --shadow-1: 0 1px 2px rgba(15,32,40,.06), 0 1px 1px rgba(15,32,40,.04);
  --shadow-2: 0 8px 24px rgba(15,32,40,.10), 0 2px 6px rgba(15,32,40,.05);
  --shadow-pop: 0 12px 32px rgba(15,32,40,.14), 0 2px 6px rgba(15,32,40,.06);

  /* Шрифт и шкала (8 размеров на весь магазин) */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-display: clamp(30px, 4vw, 44px); /* герой главной */
  --fs-h1: 28px;    /* заголовок страницы */
  --fs-h2: 22px;    /* заголовок секции */
  --fs-h3: 17px;    /* название в карточке товара на странице товара, итог */
  --fs-price-xl: 32px; /* цена на странице товара */
  --fs-body: 15px;  /* основной текст магазина */
  --fs-small: 13px; /* подписи, характеристики, бейджи */
  --fs-micro: 12px; /* сноски, счётчик корзины */
  --lh-tight: 1.2; --lh-body: 1.5;
  --track-tight: -0.022em; /* заголовки ≥22px */

  /* Отступы — сетка 4/8 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  /* Радиусы: концентрические, как в платформе (поле и кнопка — 10px) */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  /* Раскладка */
  --content-max: 1280px;
  --gutter: clamp(16px, 3vw, 32px);
  --header-h: 64px;
  --filters-w: 264px;
  --card-min: 220px;   /* минимальная ширина карточки в сетке каталога */
  /* Движение */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: .12s; --dur: .2s;
  --press-scale: .97;
  --tap: 44px;         /* минимальная цель касания на телефоне */

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1A3240; --bg-alt: #172D3A; --surface: #22404F; --surface2: #1E3A48;
  --text: #EEF4F6; --text2: #C3D3D8; --muted: #B2C4C9;
  --accent: #0B7A6E; --accent-hover: #0D8C7E; --accent-ink: #16CA88; --accent-soft: rgba(22,202,136,.12); --on-soft: #5BE3AE;
  --brand-deep: #132733;
  --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.14); --control-border: rgba(255,255,255,.45);
  --fill: rgba(255,255,255,.05); --fill-strong: rgba(255,255,255,.1);
  --sale: #FFB4A6; --sale-soft: rgba(255,155,138,.12);
  --rating: #F0B44C;
  --stock-ok: #16CA88; --stock-low: #E0B44C;
  --badge-new: #B3D1F8; --badge-new-soft: rgba(141,184,242,.12);
  --danger: #F4A08F; --warn: #E0B44C; --info: #8DB8F2;
  --shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --shadow-2: 0 8px 24px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
  --shadow-pop: 0 12px 32px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  color-scheme: dark;
}

/* База */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { letter-spacing: var(--track-tight); line-height: var(--lh-tight); font-weight: 650; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.num, .price { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }