/* ==========================================================================
   tokens.css — единственный источник значений. В компонентах — только var(--…)
   ========================================================================== */
:root {
  /* ---------- Цвет ---------- */
  --color-bg: #060606;               /* фон страницы */
  --color-surface-1: #0E0E0E;        /* приподнятая поверхность: секции, поля */
  --color-surface-2: #141414;        /* карточки, окна */
  --color-surface-3: #1B1B1A;        /* наведение на поверхности */
  --color-glass: rgba(14, 14, 14, 0.62);       /* стекло: шапка, стеклянные карточки */
  --color-glass-strong: rgba(10, 10, 10, 0.86);
  --color-border: rgba(255, 255, 255, 0.08);   /* обычная граница */
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-dashed: rgba(255, 255, 255, 0.2); /* пунктирные рамки */
  --color-text: #F3F1EE;             /* основной текст */
  --color-text-muted: #8C8A86;       /* вторичный текст */
  --color-text-ghost: #34332F;       /* «призрачная» часть заголовков */
  --color-light: #F3F1EE;            /* светлая кнопка */
  --color-light-hover: #FFFFFF;
  --color-on-light: #0A0A0A;         /* текст на светлом */
  --color-accent: #FF5A1F;           /* акцент: главная кнопка, цифры, огоньки */
  --color-accent-hover: #FF6E3A;
  --color-accent-soft: rgba(255, 90, 31, 0.12);
  --color-accent-line: rgba(255, 90, 31, 0.5);
  --color-error: #FF8A6B;            /* ошибка — тёплый, но светлее акцента */
  --color-disabled: #2A2926;
  --color-disabled-text: #5E5C58;
  --color-scrim: rgba(6, 6, 6, 0.92);

  /* ---------- Шрифты ---------- */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;   /* лого, огромные слова, большие цифры */
  --font-sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; /* заголовки и текст */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;   /* метки, выноски, формулы */

  /* ---------- Шкала размеров: 7 ступеней ---------- */
  --text-xs: 12px;                              /* служебные метки, выноски */
  --text-sm: 14px;                              /* подписи, мелкий текст */
  --text-md: 16px;                              /* основной текст, кнопки */
  --text-lg: clamp(18px, 1.35vw, 21px);         /* лиды, цитаты в карточках */
  --text-xl: clamp(28px, 3.3vw, 52px);          /* заголовки секций, H1 */
  --text-2xl: clamp(36px, 6.2vw, 104px);        /* манифест, большие цифры */
  --text-hero: clamp(38px, 10.4vw, 184px);      /* огромный заголовок hero, лого в подвале */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Межстрочные и трекинг ---------- */
  --leading-hero: 0.88;
  --leading-tight: 1.0;
  --leading-snug: 1.18;
  --leading-body: 1.55;
  --tracking-hero: -0.055em;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-mono: 0.06em;
  --tracking-display: -0.02em;

  /* ---------- Отступы (шаг 4) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --section-pad: clamp(88px, 11vw, 176px);   /* вертикальный отступ секции */

  /* ---------- Скругления ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---------- Тени ---------- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(0,0,0,0.9);
  --shadow-float: 0 40px 120px -40px rgba(0,0,0,0.95);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- Свечения ---------- */
  --glow-accent: 0 0 18px rgba(255,90,31,0.55), 0 0 48px rgba(255,90,31,0.28);      /* огонёк, кнопка */
  --glow-accent-strong: 0 0 24px rgba(255,90,31,0.7), 0 0 80px rgba(255,90,31,0.35);
  --glow-text: 0 0 28px rgba(255,90,31,0.45), 0 0 90px rgba(255,90,31,0.25);        /* цифры калькулятора */
  --glow-pool: radial-gradient(closest-side, rgba(255,90,31,0.32), rgba(255,90,31,0.08) 55%, rgba(255,90,31,0) 100%); /* лужа света под объектом */
  --glow-pillar: linear-gradient(180deg, rgba(243,241,238,0) 0%, rgba(243,241,238,0.5) 55%, rgba(255,200,170,0.85) 100%);
  --glow-border-size: 240px;          /* радиус света, следующего за курсором по рамке */

  /* ---------- Сетка ---------- */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --grid-gap: clamp(12px, 1.4vw, 20px);
  --header-h: 72px;
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-split: minmax(0, 5fr) minmax(0, 7fr);
  --grid-split-rev: minmax(0, 7fr) minmax(0, 5fr);
  --grid-price: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);

  /* ---------- Адаптив-переключатели (меняются в @media ниже) ---------- */
  --nav-display: flex;
  --burger-display: none;
  --desktop-display: flex;
  --mobile-display: none;
  --hero-anchor-top: 11vh;
  --hero-anchor-size: min(68vh, 52vw);
  --hero-core-space: clamp(200px, calc(100svh - var(--header-h) - 430px), 560px);
  --hero-areas: "pills cards" "h1 sub" "h1 cta";
  --hero-cards-pos: absolute;
  --hero-cards-top: 34vh;
  --hero-cards-right: var(--gutter);
  --hero-cards-dir: column;
  --co-dx: 44%;
  --co-dy: 28%;
  --scene-bottom: 48px;
  --steps-pad: 0px;
  --callout-len: 120px;
  --callout-label-w: max-content;
  --pain-pos: relative;
  --pain-stack-h: auto;
  --scene-len: 280vh;
  --manifest-indent: 22%;
  --cookie-bottom: 20px;

  /* ---------- Движение ---------- */
  --motion-dur-fast: 180ms;          /* наведение, нажатие */
  --motion-dur-base: 420ms;          /* переключения, аккордеон */
  --motion-dur-slow: 900ms;          /* появление M1 */
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-reveal-dist: 16px;        /* M1: подъём при появлении */
  --motion-stagger: 100ms;           /* M1: лесенка группы */
  --motion-float-amp: 6px;           /* M3: амплитуда парения */
  --motion-float-period: 6s;         /* M3: период парения */
  --motion-breathe-period: 4s;       /* M4: период дыхания свечения */
  --motion-breathe-min: 0.45;        /* M4: минимальная яркость */
  --motion-cloud-speed: 0.07;        /* M5: скорость вращения облака, рад/с */
  --motion-cloud-repel: 90;          /* M5: радиус отталкивания от курсора, px */
  --motion-cloud-points: 3200;       /* M5: точек на десктопе (телефон ×0.4) */
  --motion-scroll-lerp: 0.1;         /* сглаживание скролла: 0.05 мягко — 0.3 резко */
  --motion-parallax-text: 0.35;      /* M10: отставание огромного текста */
  --motion-parallax-cursor: 0.12;    /* M10: наклон объекта к курсору, рад */
  --motion-scramble-dur: 700ms;      /* M7: перебор символов */
  --motion-callout-dur: 1400ms;      /* M7: прорисовка выноски по времени */
  --motion-ticker-speed: 22;         /* M11: скорость ленты, px/с */
  --motion-flicker: 0.08;            /* M13: глубина мерцания столба */
}

@media (max-width: 759px) {
  :root {
    --nav-display: none;
    --burger-display: flex;
    --desktop-display: none;
    --mobile-display: flex;
    --header-h: 60px;
    --grid-2: minmax(0, 1fr);
    --grid-3: minmax(0, 1fr);
    --grid-4: minmax(0, 1fr);
    --grid-split: minmax(0, 1fr);
    --grid-split-rev: minmax(0, 1fr);
    --grid-price: minmax(0, 1fr);
    --hero-anchor-top: 128px;
    --hero-anchor-size: 300px;
    --hero-core-space: 330px;
    --hero-areas: "pills" "h1" "cards" "sub" "cta";
    --hero-cards-pos: relative;
    --hero-cards-top: auto;
    --hero-cards-right: auto;
    --hero-cards-dir: row;
    --co-dx: 17%;
    --co-dy: 30%;
    --scene-bottom: 96px;
    --steps-pad: 32px;
    --callout-len: 28px;
    --callout-label-w: 84px;
    --pain-pos: absolute;
    --pain-stack-h: 210px;
    --scene-len: 170vh;
    --manifest-indent: 0%;
    --cookie-bottom: 84px;
    --motion-parallax-cursor: 0;
  }
}
@media (min-width: 760px) and (max-width: 1099px) {
  :root { --grid-4: repeat(2, minmax(0, 1fr)); --grid-price: minmax(0, 1fr); --grid-3: minmax(0, 1fr); --callout-len: 56px; --co-dx: 36%; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-reveal-dist: 6px;
    --motion-float-amp: 2px;
    --motion-breathe-min: 0.75;
    --motion-cloud-speed: 0.025;
    --motion-cloud-repel: 40;
    --motion-parallax-text: 0.12;
    --motion-parallax-cursor: 0.03;
    --motion-scramble-dur: 250ms;
    --motion-ticker-speed: 8;
    --motion-flicker: 0.02;
  }
}