/* Дизайн-токены лендинга КОΣМОΣ.
   Светлая Tesla-стилизация: чистые светлые поверхности, тёмный графитовый текст,
   один сдержанный сталь-голубой акцент. Нейтрали тонированы к холодному hue 260.
   Палитра в OKLCH (без чистых #000/#fff). См. спеку
   docs/superpowers/specs/2026-06-22-tesla-style-redesign-design.md */

/* Manrope (variable 200–800), self-hosted woff2. Кириллица + латиница. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../assets/fonts/manrope-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../assets/fonts/manrope-cyrillic-ext-wght.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../assets/fonts/manrope-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../assets/fonts/manrope-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ===== Фон / поверхности ===== */
  --bg-0:        oklch(0.985 0.003 260);  /* базовый фон страницы — почти белый */
  --bg-1:        oklch(0.965 0.004 260);  /* мягкая подложка секций/градиента */
  --surface:     oklch(1 0 0);            /* белые карточки/панели/модалка */
  --surface-2:   oklch(0.965 0.004 260);  /* инпуты, hover, вложенные блоки */

  /* Фон секций товаров = чистый белый, в тон студийного фона фото —
     товар сливается с секцией, шва нет. */
  --photo-bg:    oklch(1 0 0);
  --card:        oklch(1 0 0);
  --card-text:   oklch(0.24 0.02 260);

  /* ===== Текст (тёмный графит на светлом) ===== */
  --heading:     oklch(0.23 0.018 260);  /* near-black, тон к холодному */
  --text:        oklch(0.31 0.016 260);
  --text-muted:  oklch(0.49 0.014 260);

  /* ===== Акцент (Tesla blue из mobile-референса) ===== */
  --accent:       #3e6ae1;
  --accent-hover: #3457b1;
  --on-accent:    oklch(0.99 0.003 260);

  /* ===== Обводки ===== */
  --border:        oklch(0.23 0.02 260 / 0.12);  /* тонкие разделители */
  --border-strong: oklch(0.23 0.02 260 / 0.28);  /* outline-кнопки, инпуты */

  /* ===== Кнопка primary: синяя (Tesla blue) + белый текст ===== */
  --btn-primary-bg:       #3e6ae1;
  --btn-primary-bg-hover: #3457b1;
  --btn-primary-text:     #ffffff;

  /* ===== Единые размеры кнопок (Tesla: компактные 40px, один в один) ===== */
  --btn-h:        40px;   /* мобайл/база */
  --btn-h-lg:     40px;   /* десктоп */
  --btn-radius:   4px;    /* острые углы */
  --btn-min-w:    200px;  /* min-width парной кнопки на десктопе */

  /* ===== Текст поверх тёмного кадра (на будущее под интерьерные фото) ===== */
  --overlay-text:  oklch(0.99 0.003 260);
  --overlay-scrim: linear-gradient(180deg, oklch(0.2 0.02 260 / 0.28), transparent 22%, transparent 70%, oklch(0.2 0.02 260 / 0.32));

  /* ===== Кнопка ghost: полупрозрачная светлая + тёмный текст ===== */
  --btn-ghost-bg:       oklch(1 0 0 / 0.92);
  --btn-ghost-bg-hover: oklch(0.97 0.004 260);

  /* ===== Типографика ===== */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --section-heading-size: clamp(2.1rem, 8.2vw, 2.95rem);
  --section-heading-line: 1.04;
  --tesla-heading-size: 28px;
  --tesla-heading-line: 36px;
  --tesla-heading-weight: 750;
  --tesla-subtitle-color: #5C5E62;
  --tesla-subtitle-size: 17px;
  --tesla-subtitle-line: 20px;
  --tesla-subtitle-weight: 550;

  /* ===== Шкала отступов (база 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 oklch(0.23 0.02 260 / 0.10);
  --shadow-card: 0 18px 50px oklch(0.23 0.02 260 / 0.14);

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