/* ============================================================
   Дизайн-токены. Две темы:
   - :root                    — тёмная (лендинги, SaaS-стиль)
   - :root[data-theme=light]  — светлая (каталожные магазины)
   Тема выбирается в конфиге: theme: { preset: "light", ... }.
   Per-site переопределения инжектятся движком после этого файла.
   Компоненты используют ТОЛЬКО токены — прямых цветов в CSS нет.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Поверхности */
  --bg: #07080d;
  --bg-elevated: #0d0f17;
  --surface: #12141f;
  --surface-2: #191c2b;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --header-bg: rgba(7, 8, 13, 0.82);
  --sticky-bg: rgba(13, 15, 23, 0.92);
  --overlay-bg: rgba(13, 15, 23, 0.72);   /* кнопки поверх фото */
  --overlay-text: #ffffff;

  /* Текст — контраст под WCAG AA */
  --text: #f2f4fa;
  --text-secondary: #b8c0d4;
  --text-muted: #8b94ab;

  /* Акценты */
  --accent: #7c6cf6;
  --accent-2: #38bdf8;
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --accent-soft: rgba(124, 108, 246, 0.14);
  --accent-border: rgba(124, 108, 246, 0.3);
  --cta: #22c55e;
  --cta-hover: #16a34a;
  --cta-soft: rgba(34, 197, 94, 0.15);
  --cta-border: rgba(34, 197, 94, 0.35);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-border: rgba(248, 113, 113, 0.3);
  --star: #fbbf24;

  /* Декоративные свечения hero */
  --hero-glow-1: rgba(124, 108, 246, 0.22);
  --hero-glow-2: rgba(56, 189, 248, 0.14);

  /* Типографика */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-base: 17px;
  --lh-base: 1.65;
  --fs-h1: clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.3rem);
  --fs-h3: 1.25rem;
  --fs-small: 0.88rem;

  /* Геометрия */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --container: 1140px;
  --section-pad: clamp(56px, 9vw, 104px);
  --gap: 24px;

  /* Тени и свечения */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glow-accent: 0 0 40px rgba(124, 108, 246, 0.35);
  --glow-cta: 0 6px 28px rgba(34, 197, 94, 0.35);

  /* Анимации */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   Светлая тема — e-commerce. Товары, цены и формы читаются
   контрастнее, восприятие «как у больших маркетплейсов».
   ------------------------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f7f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: rgba(16, 24, 40, 0.08);
  --border-strong: rgba(16, 24, 40, 0.16);
  --header-bg: rgba(255, 255, 255, 0.86);
  --sticky-bg: rgba(255, 255, 255, 0.95);
  --overlay-bg: rgba(255, 255, 255, 0.9);
  --overlay-text: #101828;

  --text: #101828;
  --text-secondary: #475467;
  --text-muted: #667085;

  --accent: #6d5ae6;
  --accent-soft: rgba(109, 90, 230, 0.09);
  --accent-border: rgba(109, 90, 230, 0.25);
  --cta: #16a34a;
  --cta-hover: #15803d;
  --cta-soft: rgba(22, 163, 74, 0.1);
  --cta-border: rgba(22, 163, 74, 0.3);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.07);
  --danger-border: rgba(220, 38, 38, 0.25);
  --star: #f59e0b;

  --hero-glow-1: rgba(124, 108, 246, 0.14);
  --hero-glow-2: rgba(56, 189, 248, 0.12);

  --shadow-card: 0 6px 24px rgba(16, 24, 40, 0.08);
  --glow-accent: 0 8px 24px rgba(109, 90, 230, 0.2);
  --glow-cta: 0 6px 18px rgba(22, 163, 74, 0.28);
}