/* ============================================================
   Armorstandart B2B — Design System v2
   Tokens. Source of truth: DESIGN-SYSTEM.md §2
   ============================================================ */

:root {
  /* ---------- Цвет ---------- */
  --canvas:          #F1F4F8;  /* холст — белое должно всплывать над ним */
  --canvas-sunken:   #E7ECF3;  /* утопленные поды под устройствами */
  --surface:         #FFFFFF;
  --surface-inverse: #14161C;  /* ровно одна тёмная полоса на страницу */

  --ink:             #0F172A;
  --ink-muted:       #526078;  /* 5.7:1 на --canvas */
  --ink-faint:       #64748B;  /* только на белом (4.8:1) */
  --ink-inverse:     #EEF2F8;

  --primary:         #0066FF;  /* заливки: CTA, плашки, активные состояния */
  --primary-hover:   #0050CB;
  --primary-ink:     #0050CB;  /* цветной текст и ссылки — 6.3:1 на --canvas */
  --primary-soft:    #DCE7FF;
  --on-primary:      #FFFFFF;

  --border:          #DFE5EE;
  --border-strong:   #C6D0DE;

  --success:         #0B7A46;  /* 5.4:1 на белом; #0E8A50 давал 4.4 — ниже нормы */
  --success-soft:    #DCF5E7;

  /* Пастельные свечения — только радиальные градиенты, не сплошная заливка */
  --glow-indigo: 139 124 255;
  --glow-cyan:   104 214 228;
  --glow-coral:  244 124 96;

  /* ---------- Типографика ---------- */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-display: clamp(2.375rem, 1.55rem + 4.1vw, 4.25rem); /* 38 → 68 */
  --text-h2:      clamp(1.875rem, 1.35rem + 2.6vw, 3.125rem); /* 30 → 50 */
  --text-h3:      clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);  /* 22 → 30 */
  --text-h4:      1.1875rem;
  --text-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* 17 → 20 */
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.8125rem;

  --lh-display: 1.02;  --ls-display: -0.03em;  --fw-display: 700;
  --lh-h3:      1.15;  --ls-h3:      -0.02em;  --fw-h3:      600;
  --lh-body:    1.6;
  --measure:    62ch;

  /* ---------- Пространство (база 4px) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --section-y:  clamp(5rem, 3.571rem + 7.143vw, 10rem); /* 80 → 160 */
  --stack-gap:  clamp(1rem, 0.714rem + 1.429vw, 2rem);  /* 16 →  32 */
  --header-gap: clamp(2rem, 1.429rem + 2.857vw, 4rem);  /* 32 →  64 */

  --container: 1280px;
  --gutter:    clamp(20px, 4vw, 48px);

  /* ---------- Форма: пилюля ИЛИ панель, ничего между ---------- */
  --r-pill:  9999px;
  --r-card:  16px;
  --r-panel: 28px;
  --r-bento: 36px;

  /* ---------- Глубина ---------- */
  --shadow-card:    0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -12px rgb(15 23 42 / .10);
  --shadow-lift:    0 2px 4px rgb(15 23 42 / .05), 0 16px 40px -16px rgb(15 23 42 / .16);
  --shadow-device:  0 8px 24px -8px rgb(15 23 42 / .12), 0 40px 80px -20px rgb(15 23 42 / .28);
  --shadow-primary: 0 12px 32px -12px rgb(0 102 255 / .45);
  --shadow-nav:     0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -16px rgb(15 23 42 / .18);

  /* ---------- Моушен ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);  /* ≈ power4.out */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);  /* ≈ expo.out */
  --t-micro: 250ms;
  --t-enter: 800ms;

  /* ---------- z-index ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* Тёмная полоса. Инвертирует тему, не меняя структуру. */
.theme-inverse {
  background: var(--surface-inverse);
  color: var(--ink-inverse);

  --ink: var(--ink-inverse);
  --ink-muted: rgb(238 242 248 / .70);
  --ink-faint: rgb(238 242 248 / .55);
  --surface: rgb(255 255 255 / .06);
  --canvas-sunken: rgb(255 255 255 / .04);
  --border: rgb(255 255 255 / .12);
  --border-strong: rgb(255 255 255 / .20);
  --primary-ink: #7FB0FF;
  --shadow-card: none;
}