/* AUTOSTYLE SHOP — токены темы (мокап).
   Единственный файл с hex. Значения Layer B = будущая тема магазина
   (Магазин → Тема + override в storefront.css пакета). */

/* ---- Шрифты (self-hosted, вариативные woff2) ---- */
@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/Unbounded-cyrillic.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/Unbounded-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/GolosText-cyrillic.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/GolosText-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* ===== Layer A — палитра AUTOSTYLE v3 (= лендинг, вытянута из фото авто) ===== */
  --c-night: #0a0d18;      /* сине-чёрный фон */
  --c-night-2: #171b2e;    /* тёмно-синяя панель */
  --c-night-line: #262c45; /* границы на тёмном */
  --c-ice: #a9c6de;        /* пастельно-голубой — акцент на тёмном */
  --c-ice-hot: #c6dbeb;
  --c-ice-deep: #3c5a87;   /* спокойный синий для белого фона (AA) */
  --c-bordo: #8a2f4f;      /* бордовый (из фото) — скидки, второй акцент */
  --c-bordo-pastel: #f4e9ee;
  --c-paper: #ffffff;
  --c-frost-50: #e8eef6;   /* пастельно-голубой фон секций */
  --c-frost-100: #d8e2ea;
  --c-frost-300: #aab3c2;
  --c-slate-600: #55617a;
  --c-ink: #101623;
  --c-fog: #e8edf5;        /* светлый текст на тёмном */
  --c-mute-dark: #97a1b4;  /* приглушённый текст на тёмном (AA на night) */
  --c-danger: #8a2f4f;     /* = bordo: бейджи скидок в бренде */
  --c-success: #2b8a3e;

  /* ===== Layer B — семантика (крутится темой) ===== */
  --shop-bg: var(--c-paper);
  --shop-bg-alt: var(--c-frost-50);
  --shop-bg-elevated: var(--c-paper);
  --shop-text: var(--c-ink);
  --shop-text-muted: var(--c-slate-600);
  --shop-text-inverse: var(--c-fog);
  --shop-border: var(--c-frost-100);
  --shop-border-strong: var(--c-frost-300);
  --shop-accent: var(--c-ink);         /* кнопки на белом — ink, как у vapila чёрные */
  --shop-accent-hover: #232c3d;
  --shop-accent-on: var(--c-paper);
  --shop-link: var(--c-ice-deep);      /* акции/ссылки на белом */
  --shop-focus-ring: var(--c-ice-deep);

  /* рама (наш слой шаблона — тёмные шапка/футер/hero) */
  --sf-frame-bg: var(--c-night);
  --sf-frame-panel: var(--c-night-2);
  --sf-frame-line: var(--c-night-line);
  --sf-frame-text: var(--c-fog);
  --sf-frame-muted: var(--c-mute-dark);
  --sf-frame-accent: var(--c-ice);
  --sf-frame-accent-hover: var(--c-ice-hot);
  --sf-frame-accent-on: var(--c-night);

  /* радиусы (пресет sharp — острые углы 90°; в CMS крутится темой) */
  --shop-radius-sm: 0;
  --shop-radius-md: 0;
  --shop-radius-lg: 0;
  --shop-radius-full: 999px; /* только круглые счётчики-бейджи */

  /* спейсинг 4pt */
  --shop-s-1: 4px;  --shop-s-2: 8px;   --shop-s-3: 12px; --shop-s-4: 16px;
  --shop-s-5: 20px; --shop-s-6: 24px;  --shop-s-8: 32px; --shop-s-10: 40px;
  --shop-s-12: 48px; --shop-s-16: 64px; --shop-s-20: 80px; --shop-s-24: 96px;

  /* лейаут */
  --shop-container-max: 1360px;
  --shop-container-px: 20px;
  --shop-container-px-md: 40px;
  --shop-header-h: 64px;
  --shop-header-h-md: 80px;

  /* типографика */
  --shop-font-display: 'Unbounded', sans-serif;   /* лого + H секций рамы */
  --shop-font-body: 'Golos Text', sans-serif;      /* всё остальное, вкл. карточки */
  --shop-tracking-wide: 0.14em;
  --shop-tracking-brand: 0.03em;

  /* карточка товара */
  --shop-pc-image-ratio: 1 / 1;

  /* тени/моушен */
  --shop-shadow-md: 0 12px 32px -16px rgba(16, 22, 35, 0.25);
  --shop-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shop-duration-base: 200ms;

  /* z-index */
  --shop-z-header: 100;
  --shop-z-drawer: 200;
  --shop-z-modal: 300;
}