/* ═══════════════════════════════════════════════════════════════════════════
   PAROVOZ — слой темы. Лежит между дизайн-системой и вёрсткой сайта:
   ds.css → theme.css → base.css → components.css → pages.css

   Здесь только переменные, ни одного правила для компонентов. Смысл слоя:

   • «мягкое стекло» — панели рисуются полупрозрачной плёнкой, мягкой тенью
     и еле заметной кромкой вместо жёсткой рамки в один пиксель;
   • форма — крупнее скругления и просторнее шкала отступов;
   • движение — одна длительность и одна кривая на весь сайт;
   • светлая тема — те же цвета, перевёрнутые: тёмный текст стал фоном,
     а ступени акцентных шкал поменялись местами (светлая 300 ↔ тёмная 700),
     чтобы «яркий акцент на тёмном» стал «глубоким акцентом на светлом».

   Тёмная тема — основная, она в :root. Светлая включается атрибутом
   data-theme="light" на <html>; его ставит core.js и запоминает выбор.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Родные элементы браузера — полосы прокрутки, выпадающие списки,
     календарь в поле даты — красятся по этому свойству. */
  color-scheme: dark;

  /* ── чёрная основа ──────────────────────────────────────────────────── */
  /* Дизайн-система даёт тёмно-синий #161826; магазину нужен чёрный.
     Берём не чистый #000: на нём пропадают мягкие тени и стеклянные
     панели — сайт становится плоским, а градиенты начинают полосить.
     #0b0b0d читается как чёрный, но глубину сохраняет. */
  --color-bg: #0b0b0d;
  --color-surface: #141417;

  /* Полоса цифр на главной была насыщенно-синей — на чёрном фоне она
     выглядела заплаткой. Переводим в тёмный с акцентным свечением. */
  --color-section: #15131f;
  --color-section-glow: #241f3a;
  --color-section-ghost: #3a3357;

  /* ── форма ──────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── шкала отступов ─────────────────────────────────────────────────── */
  /* Была на шаге 2.8px — оттого всё стояло вплотную. Теперь шаг 4px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── движение ───────────────────────────────────────────────────────── */
  --dur: 0.24s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* быстрый старт, мягкая остановка */

  /* ── стекло ─────────────────────────────────────────────────────────── */
  /* Плёнка панели: сверху светлее, снизу почти прозрачна — так плоскость
     читается как наклонённая к свету, без единой линии. */
  --panel-bg: linear-gradient(170deg,
    rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.022) 62%, rgba(255, 255, 255, 0.014));
  --panel-bg-flat: rgba(255, 255, 255, 0.038);
  --panel-edge: rgba(255, 255, 255, 0.10);
  --panel-edge-hover: color-mix(in srgb, var(--color-accent) 55%, transparent);
  /* Блик по верхней кромке — то, что делает панель стеклом, а не прямоугольником. */
  --panel-sheen: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.22) 22%, rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.20) 78%, transparent);

  /* Утопленная плоскость: подложка фото, пустые места под картинку. */
  --ground-sunken: #16161a;

  /* Стекло, под которым реально что-то есть: шапка, диалоги, липкие панели. */
  --blur-bg: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --blur-amount: blur(18px) saturate(1.35);

  /* ── тени ───────────────────────────────────────────────────────────── */
  /* В дизайн-системе тень была кольцом в один пиксель плюс жёсткий чёрный
     провал. Здесь — рассеянный мягкий свет, ближняя тень плюс дальняя. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px -14px rgba(0, 0, 0, 0.62);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 20px 44px -18px rgba(0, 0, 0, 0.70);
  --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.38), 0 44px 84px -28px rgba(0, 0, 0, 0.78);

  /* Свечение акцентом — для наведения и активных состояний. */
  --glow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 34%, transparent),
          0 18px 46px -16px color-mix(in srgb, var(--color-accent) 42%, transparent);
  --glow-soft: 0 14px 40px -20px color-mix(in srgb, var(--color-accent) 55%, transparent);

  /* ── фон страницы ───────────────────────────────────────────────────── */
  /* Два световых пятна: без них стекло не читается — размывать нечего. */
  --bloom-1: color-mix(in srgb, var(--color-accent-900) 52%, transparent);
  --bloom-2: color-mix(in srgb, black 55%, transparent);

  /* ── текст ──────────────────────────────────────────────────────────── */
  --ink-strong: var(--color-text);
  --ink: color-mix(in srgb, var(--color-text) 80%, transparent);
  --ink-soft: color-mix(in srgb, var(--color-text) 58%, transparent);
  --ink-faint: color-mix(in srgb, var(--color-text) 40%, transparent);

  /* Текст на залитой акцентом кнопке. */
  --on-accent: #0b0b0d;
}

/* ═══════════════════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА
   Палитра та же. Фон и текст меняются ролями, акцентные шкалы
   переворачиваются: то, что было светлой ступенью на тёмном, становится
   тёмной ступенью на светлом — контраст сохраняется, оттенок остаётся.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f1f2f9;
  --color-surface: #ffffff;
  --color-text: #1b1d2a;
  --color-divider: color-mix(in srgb, #1b1d2a 13%, transparent);

  /* Акцент берётся глубже по своей же шкале: #9184d9 на белом не вытягивает
     контраст для текста и мелких элементов. Оттенок тот же. */
  --color-accent: #6d61b4;
  --color-accent-2: #7b74b8;

  /* Шкалы переворачиваются: 100↔900, 200↔800, 300↔700, 400↔600, 500 на месте. */
  --color-accent-100: #2b2741;
  --color-accent-200: #423a6a;
  --color-accent-300: #5d5294;
  --color-accent-400: #796cbf;
  --color-accent-500: #968ae0;
  --color-accent-600: #b5abfc;
  --color-accent-700: #d2cefd;
  --color-accent-800: #e7e5fe;
  --color-accent-900: #f5f4ff;

  --color-accent-2-100: #2b293a;
  --color-accent-2-200: #423e5d;
  --color-accent-2-300: #5c5783;
  --color-accent-2-400: #7972a9;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #b5afe8;
  --color-accent-2-700: #d2cefd;
  --color-accent-2-800: #e7e5fe;
  --color-accent-2-900: #f5f4ff;

  --color-neutral-100: #292b31;
  --color-neutral-200: #3f424d;
  --color-neutral-300: #595d6c;
  --color-neutral-400: #75798c;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #b2b6ca;
  --color-neutral-700: #cfd3e5;
  --color-neutral-800: #e4e7f5;
  --color-neutral-900: #f3f5fe;

  /* Стекло на светлом — белая плёнка поверх серого фона, а не тёмная. */
  --panel-bg: linear-gradient(170deg,
    rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.76) 64%, rgba(255, 255, 255, 0.68));
  --panel-bg-flat: rgba(255, 255, 255, 0.82);
  --panel-edge: rgba(27, 29, 42, 0.09);
  --panel-sheen: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.9) 78%, transparent);

  --ground-sunken: #e7e9f4;

  --blur-bg: color-mix(in srgb, #ffffff 74%, transparent);

  --shadow-sm: 0 1px 2px rgba(27, 29, 42, 0.05), 0 6px 16px -10px rgba(27, 29, 42, 0.18);
  --shadow-md: 0 2px 6px rgba(27, 29, 42, 0.06), 0 18px 36px -16px rgba(27, 29, 42, 0.22);
  --shadow-lg: 0 10px 26px rgba(27, 29, 42, 0.09), 0 44px 72px -30px rgba(27, 29, 42, 0.26);

  --glow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent),
          0 18px 44px -18px color-mix(in srgb, var(--color-accent) 34%, transparent);
  --glow-soft: 0 14px 38px -22px color-mix(in srgb, var(--color-accent) 40%, transparent);

  --bloom-1: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --bloom-2: color-mix(in srgb, var(--color-accent-2) 9%, transparent);

  --ink: color-mix(in srgb, var(--color-text) 78%, transparent);
  --ink-soft: color-mix(in srgb, var(--color-text) 56%, transparent);
  --ink-faint: color-mix(in srgb, var(--color-text) 42%, transparent);

  --on-accent: #ffffff;
}