/* Дизайн-токены лендинга КОΣМОΣ.
   Тёмная база «тихий премиум»: графит-монохром, нейтрали с лёгким холодным
   подтоном, один сдержанный акцент, без неонового свечения.
   Палитра в OKLCH. Описание см. docs/superpowers/specs/. */
:root {
  /* ===== Фон / поверхности ===== */
  --bg-0:        oklch(0.17 0.014 260);  /* глубокий чернильно-синий */
  --bg-1:        oklch(0.21 0.018 260);  /* верх градиента */
  --surface:     oklch(0.235 0.016 260); /* карточки/панели на тёмном */
  --surface-2:   oklch(0.285 0.016 260); /* инпуты, hover, вложенные блоки */

  /* Подложка под фото продукта = чистый белый, в тон белого фона самих фото
     (#fefefe–#fff по пикселям) — шва не видно, «вырезанного куска» нет. */
  --photo-bg:    #ffffff;
  --card:        oklch(0.96 0.006 260);
  --card-text:   oklch(0.24 0.02 260);

  /* ===== Текст (контрастный, почти белый) ===== */
  --heading:     oklch(0.98 0.005 258);  /* near-white, без чистого #fff */
  --text:        oklch(0.95 0.008 258);
  --text-muted:  oklch(0.80 0.018 258);

  /* ===== Акцент (сдержанный, без glow) ===== */
  --accent:       oklch(0.74 0.075 248); /* спокойный сталь-голубой */
  --accent-hover: oklch(0.80 0.075 248);
  --on-accent:    oklch(0.22 0.02 260);

  /* ===== Обводки — ВИДИМЫЕ ===== */
  --border:        oklch(1 0 0 / 0.12);  /* тонкие разделители */
  --border-strong: oklch(1 0 0 / 0.30);  /* outline-кнопки, инпуты — читаемо */

  /* ===== Кнопка primary: светлая заливка + тёмный текст ===== */
  --btn-primary-bg:       oklch(0.95 0.006 258);
  --btn-primary-bg-hover: oklch(1 0 0);
  --btn-primary-text:     oklch(0.20 0.02 260);

  /* ===== Типографика ===== */
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ===== Шкала отступов (база 4px) ===== */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
  --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  /* ===== Контейнер ===== */
  --container-max: 1200px;
  --container-pad: 1.25rem;

  /* ===== Радиусы ===== */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;

  /* ===== Тени (нейтральные, мягкие) ===== */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.38);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}