/* ============================================================
   shop-storefront — дизайн-токены витрины: канон лендинг-визарда.
   Единственное место правки темы/бренда (см. README, «Смена темы»).

   Акцентные токены (--accent / --accent-strong / --on-accent) —
   ПАЛИТРА, выбранная шагом «Акцентный цвет» визарда магазина:
   визард при установке подставляет hex выбранной палитры в каждый
   из шести помеченных ниже плейсхолдеров (механика лендинг-
   визарда 1:1 — 4 палитры indigo/emerald/graphite/amber). В живом
   CSS вместо каждого плейсхолдера стоит конкретный hex выбранной
   палитры; в этом исходнике плейсхолдеры — норма.

   Нейтральные токены (--bg/--bg-soft/--card/--text/--muted/--border/
   --shadow) — канон лендинга; тёмная тема — их перезапись по
   [data-theme="dynamica-dark"] (магазин ведёт ТЕМУ САМ: тумблер
   static/js/theme.js, кука dynamica-theme, значения dynamica-light /
   dynamica-dark — НЕ html[data-theme="dark"] лендинга).

   Масштаб (канон лендинга): мобайл-фёрст, база = телефон; от 768px
   корень html { font-size: calc(100vw / 90) } — вся rem-раскладка
   едет пропорционально (макет 1440px = корень 16px); с 1440px корень
   зафиксирован — дальше растут только «уши» по бокам контейнера.
   Отступы в rem имеют один источник правды — корень.

   Без Tailwind-билда: CSS отдаётся статикой, ссылки несут ?v={{ site.version }}.
   ============================================================ */

/* ── Светлая тема (default) ─────────────────────────────────── */
:root {
  color-scheme: light; /* нативные скроллбары/контролы под тему */

  /* акцент — подстановка палитры визардом (см. шапку файла) */
  --accent: #4F46E5;
  --accent-strong: #3730A3;
  --on-accent: #ffffff;

  /* нейтрали канона лендинга */
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --card: #ffffff;
  --text: #1a1d21;
  --muted: #5c6470;
  --border: #e4e7eb;
  /* ── Тени (B1-v2): геометрия в rem, цвет — токенами по темам.
     Светлая тема: «шёпот»-тень остаётся (отделение карточки от фона
     мягкой глубиной). Hover-углубление тени УДАЛЕНО (B1-v2 джанк-фиск:
     анимированная тень карточки пульсировала под курсором при скролле) —
     hover карточки теперь = бордер + кросс-фейд фото (см. shop.css). ── */
  --shop-shadow-color: rgba(10, 14, 20, .07);
  --shop-shadow-color-strong: rgba(10, 14, 20, .16);
  --shop-shadow-card: 0 0.5rem 1.875rem var(--shop-shadow-color);      /* карточки: тень покоя */
  --shop-shadow-pop: 0 0.25rem 1.25rem var(--shop-shadow-color);       /* панели/листы/дропдаун */
  --shadow: var(--shop-shadow-card); /* алиас совместимости — новые правила используют именованные */
  /* hover-бордер карточки: одна ступень глубже --border, читается в обеих
     темах (формула от --muted/--border сама адаптируется к теме) */
  --shop-border-hover: color-mix(in srgb, var(--muted) 35%, var(--border));

  /* ── Тап-таргеты (B1, P2 критика: бэнд 768–863px) ──
     Пропорциональный корень (768/90 ≈ 8.5px) сдувает rem-контролы ниже
     AA-пола 24px (SC 2.5.8). Пиксельный пол внутри max() — ЛЕГИТИМНОЕ
     исключение px-запрета: пол тап-таргета не должен масштабироваться
     корнем (внесено в список исключений check-hygiene). */
  --shop-touch: max(2.75rem, 44px);      /* тач-цель: ≥44px на любой ширине */
  --shop-control-h: max(2.5rem, 24px);   /* компактная высота контролов ≥48rem: ≥24px на любой ширине */

  /* статусы — тинт-модель лендинга: заливка 12% + цветной текст,
     без сплошных заливок (W6 №25, переносится на канон без изменений).
     B1 (D5, WCAG 1.4.3): значения подобраны под AA на СВОЕМ тинте
     (бейджи = мелкий текст): ok #0b7a56 → 4.5:1 на ok-tint,
     warn #a1480a → 4.9:1, err #c81e1e → 4.7:1 (прошлые #0e9f6e/
     #d97706/#dc2626 роняли контраст до 2.8–4.0:1). */
  --ok: #0b7a56;
  --ok-tint: color-mix(in srgb, var(--ok) 12%, transparent);
  --warn: #a1480a;
  --warn-tint: color-mix(in srgb, var(--warn) 14%, transparent);
  --err: #c81e1e;
  --err-tint: color-mix(in srgb, var(--err) 12%, transparent);

  /* акцентные производные (тинты поверх var(--accent) — едут за палитрой) */
  --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-tint-strong: color-mix(in srgb, var(--accent) 15%, transparent);

  /* радиусы канона лендинга: карточка 12px, кнопка/инпут 10px, пилюля */
  --radius-card: 12px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* типографика: системный стек канона; размеры в rem — масштаб несёт корень */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;    /* база и инпуты телефона (16px — iOS не зумит) */
  --text-lg: 1.125rem;

  /* геометрия витрины */
  --container: 72rem;        /* каталог, шапка, футер */
  --container-prose: 44rem;  /* описания, checkout-колонка */
  --container-narrow: 36rem; /* статус-экран заказа */
  /* B1 (находка владельца, 320): база = телефон — гуттер 1rem, иначе сумма
     «гуттер + мягкая тень» читалась толстым полем у краёв; от 30rem —
     канон .wrap 1.25rem (медиазапрос в конце файла) */
  --gutter: 1rem;
  --section-y: 4rem;         /* канон секций лендинга */
  --tools-h: 3.5rem;         /* sticky-тулбар = строке шапки */

  /* ── Шкала отступов (ЕДИНАЯ, B1 спейсинг-аудит) ──
     Каждый margin/padding компонента берётся отсюда, когда значение
     попадает в шаг; масштаб несёт корень (100vw/90 от 768px, фикс 16px
     с 1440px) — отступы масштабируются сами (паттерн лендинга).
     Вне шкалы сознательно остаётся КОМПОНЕНТНАЯ микрогеометрия
     (0.375/0.625/0.875rem… — визуальный канон W7, rem-литералы;
     enforceable запрет — raw px в margin/padding, см. check-hygiene). */
  --shop-space-1: 0.25rem; /*  4px */
  --shop-space-2: 0.5rem;  /*  8px */
  --shop-space-3: 0.75rem; /* 12px */
  --shop-space-4: 1rem;    /* 16px */
  --shop-space-5: 1.25rem; /* 20px = --gutter */
  --shop-space-6: 1.5rem;  /* 24px */
  --shop-space-7: 2rem;    /* 32px */
  --shop-space-8: 3rem;    /* 48px */
  --shop-space-9: 4.5rem;  /* 72px — hero канона лендинга */

  /* высота sticky-шапки (тулбар прилипает ПОД ней) */
  --header-h: 3.5rem;

  /* анимация */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --theme-fade: 150ms ease; /* глобальный кросс-фейд темы */
}

/* ── Тёмная тема — канон лендинга (нейтрали) + светлеющий акцент ──
   В тёмной теме акцент светлеет — исходный тон терял контраст на
   тёмном фоне; текст на акценте становится тёмным. */
[data-theme="dynamica-dark"] {
  color-scheme: dark;

  --accent: #818CF8;
  --accent-strong: #A5B4FC;
  /* акцент в тёмной теме светлее — текст на нём нужен тёмный */
  --on-accent: #1E1B4B;

  --bg: #0f1115;
  --bg-soft: #151920;
  --card: #171b22;
  --text: #e8eaed;
  --muted: #9aa3af;
  --border: #2a3038;
  /* ── B1-v2 (находка владельца «всратые тени на тёмном»): на тёмной теме
     теней НЕТ. Большая мягкая тень на #0f1115 физически размывает края
     карточек в кашу (rem-токены с чёрным это не лечат). Карточку отделяют
     ТОЛЬКО hairline-бордер (--border) + заливка --card (светлее --bg);
     pop-поверхности (дропдаун/листы) — бордер + минимальная тень глубины
     (контакт с подложкой, без разлёта). ── */
  --shop-shadow-card: none;
  --shop-shadow-pop: 0 0.125rem 0.5rem rgba(0, 0, 0, .4);
  --shop-shadow-color: rgba(0, 0, 0, .45);
  --shop-shadow-color-strong: rgba(0, 0, 0, .55);

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-tint-strong: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Гуттер: от 30rem — канон .wrap 1.25rem (база 320 = 1rem, см. :root) */
@media (min-width: 30rem) { :root { --gutter: 1.25rem; } }

/* ── Масштаб: макет 1440px = корень 16px. От 768px корень = 100vw/90
      (это 16px на ширине 1440) — вся rem-раскладка едет пропорционально;
      с 1440px корень зафиксирован — дальше растут только уши. ── */
@media (min-width: 768px) { html { font-size: calc(100vw / 90); } }
@media (min-width: 1440px) { html { font-size: 16px; } }

/* Контентные фото в тёмной теме приглушаются (W6 №25): яркое фото на тёмном
   фоне слепит. B1-v2 (джанк-фиск): GPU-фильтр brightness/contrast заменён
   на opacity — фильтр перерисовывает снимок при каждом invalidate кадра,
   opacity достаточно композитору. :where() держит специфичность ниже
   кросс-фейда карточки (покой .card-img-alt=0 / hover=1 не ломаются). */
:where([data-theme="dynamica-dark"]) .product-card-photo img,
:where([data-theme="dynamica-dark"]) .gallery-slide img,
:where([data-theme="dynamica-dark"]) .gallery-thumb img {
  opacity: .92;
}

/* Глобальный кросс-фейд темы — один transition, без JS-тайминга.
   Тему выбирает ТОЛЬКО клиент: страницы кэшируются по path, SSR всегда отдаёт
   dynamica-light. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: color var(--theme-fade) ease,
                background-color var(--theme-fade) ease,
                border-color var(--theme-fade) ease;
  }
}