/*
  Дизайн-токены M79. Три слоя: primitive → semantic → component.
  Компоненты используют только semantic/component-токены, сырые значения — только здесь.
  Палитра снята с героического видео (неон, лёд, глубокий синий).
  Сайт намеренно один тёмный вид: светлой темы нет.
*/

/* ===== 1. PRIMITIVE: сырые значения ===== */
:root {
  /* Синие из видео, от почти чёрного к ледяному */
  --navy-1000: #000415;
  --navy-950: #010b22;
  --navy-900: #01122f;
  --navy-800: #0a2856;
  --blue-700: #224d88;
  --blue-600: #3e71af;
  --blue-500: #598ec7;
  --blue-300: #7eb0e1;
  --blue-100: #badbf3;
  --ice-50: #eef6ff;

  /* RGB-тройки для прозрачностей */
  --rgb-navy-1000: 0 4 21;
  --rgb-navy-900: 1 18 47;
  --rgb-blue-700: 34 77 136;
  --rgb-blue-600: 62 113 175;
  --rgb-blue-300: 126 176 225;
  --rgb-blue-100: 186 219 243;
  --rgb-ice-50: 238 246 255;

  /* Шрифты */
  --font-unbounded: "Unbounded", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-onest: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* Радиусы */
  --radius-xs: 0.5rem;
  --radius-sm: 0.875rem;
  --radius-md: 1.375rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;

  /* Длительности и кривые */
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== 2. SEMANTIC: назначение ===== */
:root {
  color-scheme: dark;

  /* Цвета */
  --color-bg: var(--navy-1000);
  --color-bg-deep: var(--navy-950);
  --color-surface-header: var(--navy-900);
  --color-surface-raised: var(--navy-800);
  --color-text: var(--ice-50);
  --color-text-muted: rgb(var(--rgb-blue-100) / 0.72);
  --color-text-subtle: rgb(var(--rgb-blue-100) / 0.52);
  --color-accent: var(--blue-300);
  --color-accent-strong: var(--blue-100);
  --color-accent-deep: var(--blue-600);
  --color-line: rgb(var(--rgb-blue-300) / 0.16);
  --color-line-strong: rgb(var(--rgb-blue-300) / 0.34);
  --color-focus: var(--blue-100);
  --color-on-accent: var(--navy-1000);

  /* Неоновое свечение */
  --glow-sm: 0 0 0.75rem rgb(var(--rgb-blue-600) / 0.55);
  --glow-md: 0 0 2rem rgb(var(--rgb-blue-600) / 0.45);
  --glow-text: 0 0 0.6em rgb(var(--rgb-blue-600) / 0.85), 0 0 1.6em rgb(var(--rgb-blue-600) / 0.45);

  /* Типографика */
  --font-display: var(--font-unbounded);
  --font-body: var(--font-onest);

  /* Флюидная шкала. Корневой размер тоже флюидный (base.css), поэтому rem растёт на ТВ */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --text-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-h2: clamp(1.5rem, 1.05rem + 2.1vw, 2.875rem);
  --text-h1: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  --text-price: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-label: 0.14em;

  /* Шкала отступов: внутри компонентов */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --space-lg: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --space-xl: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
  /* Между секциями */
  --space-section: clamp(4rem, 2.6rem + 5.5vw, 8.5rem);

  /* Сетка */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --container: 76rem;
  --measure: 36rem;
}

/* ===== 3. COMPONENT: конкретные компоненты ===== */
:root {
  /* Шапка: отличается от фона страницы */
  --header-bg: rgb(var(--rgb-navy-900) / 0.94);
  --header-border: var(--color-line-strong);
  --header-h: 4.25rem;
  --header-cta-radius: 0.75rem;

  /* Кнопки */
  --btn-h: 3rem;
  --btn-px: 1.375rem;
  --btn-radius: var(--radius-pill);
  --btn-primary-bg: var(--color-accent-strong);
  --btn-primary-bg-hover: var(--ice-50);
  --btn-primary-fg: var(--color-on-accent);
  --btn-ghost-border: var(--color-line-strong);
  --btn-ghost-bg-hover: rgb(var(--rgb-blue-300) / 0.1);

  /* Стекло. Внутренний радиус = внешний − толщина рамки */
  --glass-radius: var(--radius-lg);
  --glass-frame: clamp(0.375rem, 0.25rem + 0.4vw, 0.625rem);
  --glass-inner-radius: calc(var(--glass-radius) - var(--glass-frame));
  --glass-pad: var(--space-lg);
  --glass-frame-bg: linear-gradient(145deg, rgb(var(--rgb-blue-100) / 0.26), rgb(var(--rgb-blue-600) / 0.08) 45%, rgb(var(--rgb-blue-300) / 0.2));
  --glass-inner-bg: linear-gradient(160deg, rgb(var(--rgb-navy-900) / 0.86), rgb(var(--rgb-navy-1000) / 0.92));
  --glass-edge: rgb(var(--rgb-blue-100) / 0.32);
  --glass-shadow: 0 1.5rem 4rem -1.5rem rgb(0 0 0 / 0.8), 0 0 3rem -0.5rem rgb(var(--rgb-blue-600) / 0.35);
  --glass-blur: 14px;
  --glass-tilt-max: 8deg;

  /* Заголовок первого блока: неоновый контур, как логотип в видео */
  --hero-title-stroke: 0.035em;
  --hero-title-stroke-color: var(--color-accent-strong);
  --hero-title-glow: 0 0 0.35em rgb(var(--rgb-blue-600) / 0.9), 0 0 1.2em rgb(var(--rgb-blue-600) / 0.55);

  /* Карточка акции: та же система, меньше радиус */
  --promo-radius: var(--radius-md);
  --promo-frame: 0.3125rem;
  --promo-inner-radius: calc(var(--promo-radius) - var(--promo-frame));

  /* Карусель */
  --carousel-gap: var(--space-sm);
}

@media (min-width: 60rem) {
  :root {
    --header-h: 4.75rem;
    --btn-h: 3.25rem;
  }
}