/* =========================================================
   ГаражБатя — ELEVATE / TOKENS (фундамент премиум-элевации)
   Грузится ПОСЛЕ всех слоёв (theme→components→sections→patch→
   fallbacks→pages) → при равной специфичности побеждает.
   Только токены, утилиты и деликатная глобальная полировка.
   НЕ ломает разметку/JS-хуки. 8pt-ритм · 12-кол. сетка ·
   fluid-типографика · glassmorphism · световые акценты.
   Этот файл — КОНТРАКТ имён для остальных CSS-агентов.
   ========================================================= */

/* =========================================================
   1. ТОКЕНЫ (:root) — переопределяют/дополняют theme.css
   ========================================================= */
:root {
  /* ---------- 8pt-шкала ритма ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ---------- Типошкала (fluid clamp) ---------- */
  --fs-display: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.4rem, 5vw, 4rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.8rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-base: 1rem;
  --fs-sm: .9rem;
  --fs-xs: .78rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.65;

  --tracking-tight: -.02em;
  --tracking-eyebrow: .22em;

  /* ---------- Радиусы (премиум-переопределение) ---------- */
  --radius: 20px;
  --radius-lg: 24px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  /* ---------- Стекло-тиры ---------- */
  --glass-1: rgba(255, 255, 255, .04);
  --glass-2: rgba(255, 255, 255, .07);
  --glass-edge: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 40%);

  /* ---------- Glow / тени ---------- */
  --glow-accent: 0 0 40px rgba(255, 106, 26, .32);
  --glow-soft: 0 0 0 1px var(--glass-brd), 0 12px 50px rgba(0, 0, 0, .5);
  --shadow-1: 0 4px 18px rgba(0, 0, 0, .35);
  --shadow-2: 0 14px 50px rgba(0, 0, 0, .5);
  --shadow-3: 0 30px 90px rgba(0, 0, 0, .6);

  /* ---------- Сетка ---------- */
  --gutter: var(--sp-5);
  --col-gap: var(--sp-5);
}

/* =========================================================
   2. УТИЛИТЫ
   ========================================================= */

/* ---------- 12-колоночная сетка ---------- */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }

@media (max-width: 767.98px) {
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8 { grid-column: 1 / -1; }
}

/* ---------- Тонкий градиентный разделитель ---------- */
.u-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-hi) 50%,
    transparent 100%
  );
}

/* ---------- Декоративный радиальный световой блоб ---------- */
.u-beam {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(40px);
  background: radial-gradient(
    circle at center,
    rgba(255, 106, 26, .22) 0%,
    rgba(255, 106, 26, 0) 70%
  );
}
.u-beam--cool {
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, .18) 0%,
    rgba(59, 130, 246, 0) 70%
  );
}

/* ---------- Оверлей-зерно ---------- */
.u-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("/assets/img/noise.png");
  background-size: 200px;
  opacity: .04;
  mix-blend-mode: overlay;
}

/* ---------- Надзаголовок (kicker) ---------- */
.u-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.u-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
  flex: 0 0 auto;
}

/* ---------- Верхняя световая грань ---------- */
.u-glow-edge {
  position: relative;
}
.u-glow-edge::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--glass-edge);
  pointer-events: none;
}

/* ---------- Акцентный градиент по тексту ---------- */
.text-gradient {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   3. ГЛОБАЛЬНАЯ ПОЛИРОВКА РИТМА / ТИПОГРАФИКИ
   (только размеры / интерлиньяж / трекинг — без структуры)
   ========================================================= */
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

p,
li,
.lead {
  line-height: var(--lh-body);
}
.lead {
  font-size: var(--fs-lead);
  color: var(--text-soft);
}

.section {
  padding-block: clamp(var(--sp-8), 9vw, var(--sp-10));
}
.container {
  max-width: var(--container);
  padding-inline: var(--sp-5);
}

/* ---------- Поведение скролла ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* ---------- Выделение ---------- */
::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- Кастомный скроллбар (accent) ---------- */
* {
  scrollbar-color: var(--accent) var(--bg-2);
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg-2);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: 3px solid var(--bg-2);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ---------- Плавный focus-visible (accent ring) ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  transition: outline-offset var(--dur) var(--ease);
}

/* =========================================================
   4. ДЕЛИКАТНЫЕ ФОНОВЫЕ СВЕЧЕНИЯ (фиксированные псевдо-блобы)
   2 мягких пятна по углам поверх body-градиентов theme.css
   ========================================================= */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: 60vw;
  max-width: 760px;
  height: 60vw;
  max-height: 760px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}
body::before {
  top: -22vw;
  left: -16vw;
  background: radial-gradient(
    circle at center,
    rgba(255, 106, 26, .12) 0%,
    rgba(255, 106, 26, 0) 68%
  );
}
body::after {
  bottom: -24vw;
  right: -16vw;
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, .09) 0%,
    rgba(59, 130, 246, 0) 68%
  );
}

/* =========================================================
   5. ДОСТУПНОСТЬ — уважение к prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :focus-visible { transition: none; }
}