/* ============================================================
   vologdavezdehod.ru — дизайн-токены
   Концепция «Ночная смена»: цех ночью, один прожектор, сталь и грязь.
   Все значения здесь — единственный источник правды для base.css и вёрстки.
   Брейкпоинты (используются в media-запросах как числа, переменные в @media не работают):
     360  — минимальная ширина, всё должно жить
     560  — телефон в альбоме / большие телефоны: сетки 2 колонки
     820  — планшет: появляется горизонтальная шапка, две колонки в hero
     1080 — десктоп: полная сетка, сравнение без скролла
     1400 — широкий экран: контейнер упирается в max-width
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Цвета: база из брифа ---------- */
  --c-bg: #101214;            /* фон страницы */
  --c-surface: #181B1E;       /* карточки, шапка, плашки */
  --c-text: #F2F0EA;          /* основной текст, «тёплый белый» */
  --c-accent: #F26B1D;        /* оранжевый акцент, «сварка» */

  /* ---------- Цвета: производные поверхности ---------- */
  --c-bg-deep: #0A0B0C;       /* низ прожектора, самые тёмные зоны, подложка 3D */
  --c-surface-2: #1F2327;     /* карточка при наведении, вложенные плитки */
  --c-surface-3: #262B30;     /* активный таб, ячейка таблицы под курсором */
  --c-steel: #3C4146;         /* сталь: рамки крупных элементов, разделители на светлом */
  --c-steel-light: #5A6169;   /* иконки-заглушки, неактивные элементы */

  /* ---------- Цвета: текст ---------- */
  --c-text-muted: #B4B1A9;    /* подписи, второй план; 9.5:1 на фоне */
  --c-text-dim: #9A9891;      /* мелкие технические подписи: 6.5:1 на фоне, 5.5:1 на surface-2, 4.95:1 на surface-3 — AA везде, не мельче 12px */
  --c-text-on-accent: #101214;/* текст на оранжевом: 5.7:1. Белый на оранжевом НЕ проходит AA */
  --c-text-inverse: #101214;

  /* ---------- Цвета: акцент и его состояния ---------- */
  --c-accent-hover: #FF7E33;
  --c-accent-active: #D85A11;
  --c-accent-soft: rgba(242, 107, 29, 0.14);   /* подложка под оранжевую подпись, тег */
  --c-accent-line: rgba(242, 107, 29, 0.55);   /* тонкие линии, «сварочный шов» */
  --c-accent-hot: #FFB27A;                     /* сердцевина свечения, самый горячий тон */

  /* ---------- Цвета: расширение палитры (грунт, хаки, вода) ---------- */
  --c-khaki: #5F6140;         /* хаки кузова ЗИС-5 ПРО, цвет тегов «Тайга/Болото» */
  --c-moss: #1A4A30;          /* зелёный кузова ЗИС-5 М, редко, только в графике */
  --c-mud: #3A2E22;           /* грязь: тень под машиной, низ рельефа */
  --c-rust: #8A3B12;          /* ржавчина: тёмный оранжевый для градиентов, не для текста */
  --c-water: #24404A;         /* вода в графике «Где проходит» */
  --c-snow: #D9DCDE;          /* снег в графике «Где проходит» */
  --c-sand: #8A6A3B;          /* песок в графике «Где проходит» */

  /* ---------- Семантика ---------- */
  --c-success: #6FBF73;
  --c-error: #F0644D;         /* 5.4:1 на фоне */
  --c-focus: #FFB27A;         /* кольцо фокуса, ярче акцента, чтобы отличалось от hover */

  /* ---------- Бордеры ---------- */
  --c-border: rgba(242, 240, 234, 0.10);
  --c-border-strong: rgba(242, 240, 234, 0.22);
  --c-border-accent: rgba(242, 107, 29, 0.60);
  --border: 1px solid var(--c-border);
  --border-strong: 1px solid var(--c-border-strong);

  /* ---------- Тени и свечение ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 0 rgba(242, 240, 234, 0.06);
  --glow-accent: 0 0 0 1px rgba(242, 107, 29, 0.35), 0 0 32px rgba(242, 107, 29, 0.30);
  --glow-accent-strong: 0 0 0 1px rgba(242, 107, 29, 0.6), 0 0 56px rgba(242, 107, 29, 0.45);

  /* ---------- Свет 3D-сцены (прожектор) — те же значения для CSS-подложки и для Three.js ---------- */
  --spot-color: #FFE9CF;      /* тёплый ключевой свет сверху */
  --spot-rim: #F26B1D;        /* оранжевый контровой свет сзади-снизу */
  --spot-fill: #2A3440;       /* холодный заполняющий, сине-стальной */
  /* Подложка под сценой: конус сверху, тёплое пятно на полу, оранжевый контровой снизу. Значения заметные — модель должна стоять «в свете», а не плавать в сером */
  --spot-floor: radial-gradient(ellipse 62% 34% at 50% 76%, rgba(255, 233, 207, 0.20), rgba(242, 240, 234, 0.06) 45%, transparent 72%);
  --spot-cone: radial-gradient(ellipse 42% 78% at 50% 0%, rgba(255, 233, 207, 0.26), rgba(255, 233, 207, 0.06) 55%, transparent 78%);
  --spot-rim-glow: radial-gradient(ellipse 56% 30% at 50% 84%, rgba(242, 107, 29, 0.42), rgba(138, 59, 18, 0.18) 45%, transparent 72%);

  /* ---------- Текстуры ---------- */
  /* зерно: SVG-шум, накладывается псевдоэлементом с opacity var(--grain-opacity) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  --grain-opacity: 0.045;
  /* протектор: диагональные грунтозацепы, используется в .tread */
  --tread: repeating-linear-gradient(-58deg, var(--c-surface-3) 0 14px, transparent 14px 30px);
  /* сетка цеха: тонкие линии для фона hero и заглушки 3D */
  --grid: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  --grid-size: 64px;

  /* ---------- Шрифты ---------- */
  /* Два семейства, четыре начертания суммарно: Manrope 400/700, Oswald 500/600 */
  --ff-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-display: 600;
  --fw-display-light: 500;

  /* ---------- Модульная шкала (fluid, 360 → 1400) ---------- */
  --fs-2xs: 0.75rem;                                  /* 12  технические подписи */
  --fs-xs: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);   /* 13–14 */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);    /* 14–15 */
  --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16–18 основной текст */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);     /* 18–22 лид */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);      /* 22–30 h3 */
  --fs-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);      /* 30–52 h2 */
  --fs-3xl: clamp(2.5rem, 1.6rem + 4.6vw, 5.5rem);         /* 40–88 h1, названия моделей */
  --fs-num: clamp(2.75rem, 1.5rem + 6vw, 7rem);            /* 44–112 цифры полосы, цены */
  --fs-giant: clamp(5rem, 2rem + 18vw, 22rem);             /* фоновые слова-водяные знаки */

  --lh-tight: 1.02;
  --lh-display: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --ls-display: -0.005em;
  --ls-caps: 0.08em;

  /* ---------- Отступы ---------- */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);   /* вертикальный ритм секций */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);   /* боковые поля контейнера */

  /* ---------- Контейнер ---------- */
  --container: 1280px;
  --container-narrow: 860px;
  --container-wide: 1440px;

  /* ---------- Радиусы: почти прямые углы, «сталь», не «пилюли» ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;   /* только для тегов-«шильдиков» и точек статуса */

  /* ---------- Размеры компонентов ---------- */
  --btn-h: 3rem;          /* 48px — минимум по брифу */
  --btn-h-lg: 3.5rem;     /* 56px — главные CTA на десктопе */
  --tap-min: 48px;
  --header-h: 72px;
  --header-h-mobile: 60px;
  --sticky-bar-h: 64px;   /* закреплённые мобильные кнопки */
  --stage-ratio: 4 / 3;   /* пропорция 3D-сцены и главных фото */
  --photo-ratio: 4 / 3;
  --photo-ratio-wide: 16 / 9;

  /* ---------- Движение ---------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
  --dur-reveal: 700ms;
  --dur-ticker: 40s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* тяжёлый объект приезжает и оседает */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mech: cubic-bezier(0.2, 0.9, 0.3, 1.15); /* лёгкий перелёт — щелчок механизма */
  --reveal-y: 24px;                                /* сдвиг при появлении блока */

  /* ---------- Z-слои ---------- */
  --z-stage: 1;
  --z-content: 2;
  --z-sticky: 50;
  --z-header: 100;
  --z-menu: 110;
  --z-toast: 200;
}

/* Уважаем системный запрет на анимацию: всё мгновенно, тикер стоит,
   параллакс и «ход по рельефу» в JS проверяют это же медиа-условие. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
    --dur-ticker: 0s;
    --reveal-y: 0px;
  }
}

/* Пользователь просит больше контраста: убираем полупрозрачность бордеров и подписи делаем светлее */
@media (prefers-contrast: more) {
  :root {
    --c-border: rgba(242, 240, 234, 0.32);
    --c-border-strong: rgba(242, 240, 234, 0.5);
    --c-text-muted: #D6D3CB;
    --c-text-dim: #B4B1A9;
    --grain-opacity: 0;
  }
}