/* ============================================================
   Design tokens — Лендинг «СВЕТЛО»
   Панорамное остекление из алюминия

   v2 — OKLCH, тёплые нейтралы, Figtree, fluid spacing
   Источник правды: design-system.md
   Чтобы сменить бренд — правим --accent-* и шрифтовые семейства.
   ============================================================ */

:root {
  /* ---------- Бренд-хью (базовая точка для тонирования) ---------- */
  --brand-hue: 42;               /* тёплый оранж-охра */

  /* ============================================================
     Цвета — OKLCH, нейтралы тонированы в сторону brand-hue
     Chroma 0.004–0.012 — едва заметно, создаёт подсознательную
     когерентность с акцентом.
     ============================================================ */

  /* Текст и поверхности (ink = чёрное/графит, paper = светлое) */
  --ink-900:  oklch(18%  0.012 var(--brand-hue));  /* основной текст, тёмный фон */
  --ink-800:  oklch(24%  0.012 var(--brand-hue));  /* футер, оверлеи */
  --ink-700:  oklch(32%  0.010 var(--brand-hue));
  --ink-500:  oklch(48%  0.010 var(--brand-hue));  /* body-текст */
  --ink-400:  oklch(60%  0.008 var(--brand-hue));  /* подписи, meta */
  --ink-300:  oklch(76%  0.006 var(--brand-hue));
  --ink-200:  oklch(86%  0.005 var(--brand-hue));  /* бордеры */
  --ink-100:  oklch(93%  0.004 var(--brand-hue));  /* hairline */

  --paper-50: oklch(97.5% 0.004 var(--brand-hue)); /* фон секций-пауз */
  --paper-0:  oklch(99%   0.003 var(--brand-hue)); /* основной фон — НЕ чистый белый */

  /* Бренд-акцент — тёплый terracotta */
  --accent-700: oklch(48%  0.17  var(--brand-hue));
  --accent-600: oklch(56%  0.175 var(--brand-hue)); /* основной CTA */
  --accent-500: oklch(64%  0.17  var(--brand-hue)); /* hover */
  --accent-300: oklch(82%  0.10  var(--brand-hue));
  --accent-100: oklch(93%  0.05  var(--brand-hue)); /* фон badge, soft подложка */

  /* Семантика */
  --success-600: oklch(56% 0.13 155);
  --warning-600: oklch(62% 0.15 70);
  --danger-600:  oklch(56% 0.18 25);

  /* ============================================================
     Шрифты
     ============================================================ */
  --font-display: "Unbounded", Georgia, serif;
  --font-text:    "Figtree", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============================================================
     Типографическая шкала (desktop)
     формат: размер / line-height / letter-spacing
     ============================================================ */
  --t-display-size: clamp(48px, 9vw, 128px);
  --t-display-lh:   0.92;
  --t-display-ls:   -0.035em;

  --t-h1-size:      clamp(40px, 5.5vw, 72px);
  --t-h1-lh:        1.05;
  --t-h1-ls:        -0.02em;

  --t-h2-size:      clamp(32px, 4vw, 52px);
  --t-h2-lh:        1.1;
  --t-h2-ls:        -0.015em;

  --t-h3-size:      clamp(22px, 2.2vw, 28px);
  --t-h3-lh:        1.25;
  --t-h3-ls:        -0.01em;

  --t-h4-size:      clamp(18px, 1.5vw, 20px);
  --t-h4-lh:        1.35;
  --t-h4-ls:        0;

  --t-body-lg-size: clamp(17px, 1.3vw, 20px);
  --t-body-lg-lh:   1.55;

  --t-body-size:    17px;
  --t-body-lh:      1.6;

  --t-body-sm-size: 15px;
  --t-body-sm-lh:   1.5;

  --t-caption-size: 13px;
  --t-caption-lh:   1.4;

  --t-eyebrow-size: 12px;
  --t-eyebrow-lh:   1.3;
  --t-eyebrow-ls:   0.12em;

  /* ============================================================
     Spacing — 4pt scale, крупные шаги текучие (clamp)
     ============================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  clamp(28px, 2.5vw, 36px);
  --s-7:  clamp(36px, 3.5vw, 52px);
  --s-8:  clamp(48px, 5vw, 72px);
  --s-9:  clamp(64px, 7vw, 104px);
  --s-10: clamp(80px, 10vw, 144px);
  --s-11: clamp(96px, 12vw, 180px);

  /* ---------- Контейнеры ---------- */
  --container-lg: 1120px;
  --container-xl: 1280px;

  /* ---------- Радиусы ---------- */
  --r-none: 0;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- Бордеры ---------- */
  --border-hairline: 1px solid var(--ink-100);
  --border-default:  1px solid var(--ink-200);
  --border-strong:   1px solid var(--ink-900);

  /* ---------- Тени (с лёгким тёплым оттенком) ---------- */
  --shadow-xs:   0 1px 2px   oklch(18% 0.012 var(--brand-hue) / 0.04);
  --shadow-sm:   0 2px 8px   oklch(18% 0.012 var(--brand-hue) / 0.06);
  --shadow-md:   0 8px 24px  oklch(18% 0.012 var(--brand-hue) / 0.08);
  --shadow-lg:   0 20px 48px oklch(18% 0.012 var(--brand-hue) / 0.12);
  --shadow-hero: 0 40px 120px oklch(18% 0.012 var(--brand-hue) / 0.18);

  /* ============================================================
     Motion
     Эмилевские strong curves + UI-safe durations (< 300ms)
     ============================================================ */
  --dur-press:  120ms;   /* button press feedback */
  --dur-hover:  160ms;   /* hover, chip, card */
  --dur-ui:     200ms;   /* dropdowns, tooltips, popovers */
  --dur-modal:  260ms;   /* modal open */
  --dur-exit:   180ms;   /* exit всегда быстрее enter */
  --dur-scene:  520ms;   /* hero, stagger, decorative */

  /* Legacy-алиасы — для мест, куда руки ещё не дошли */
  --dur-1: var(--dur-press);
  --dur-2: var(--dur-hover);
  --dur-3: var(--dur-ui);
  --dur-4: var(--dur-modal);
  --dur-5: var(--dur-scene);

  /* Strong easing — из Ionic / Emil Kowalski */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);     /* strong ease-in-out */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS-like, для модалок/drawers */
  --ease-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint:  cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;
}

/* ============================================================
   Утилитарные классы типографики
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  font-weight: 700;
  text-wrap: balance;
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-ls);
  font-weight: 700;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
  font-weight: 700;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls);
  font-weight: 700;
}
.t-h4 {
  font-family: var(--font-text);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  font-weight: 600;
}
.t-body-lg {
  font-family: var(--font-text);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
  font-weight: 400;
}
.t-body {
  font-family: var(--font-text);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: 400;
}
.t-body-sm {
  font-family: var(--font-text);
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  font-weight: 400;
}
.t-caption {
  font-family: var(--font-text);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: 400;
  color: var(--ink-400);
}
.t-eyebrow {
  font-family: var(--font-text);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-600);
}

/* Табличные цифры для статистики и счётчиков */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Reduced motion
   Emil Kowalski: reduced ≠ zero. Сохраняем fade/opacity (нужно
   для понимания enter/exit), убираем только движения и скейлы.
   Loop-анимации полностью отключаем.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Сокращаем длительности транзишнов, но не до нуля —
     нужен edge trigger для UI-состояний */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
    scroll-behavior: auto !important;
  }
  /* Убираем все transform-анимации: никаких движений, скейлов, ротаций */
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, fill, stroke !important;
  }
}