/* ============================================================
   ВЕГА — Design Tokens
   Единый источник правды: примитивы → семантические токены.
   Все значения в проекте берутся только отсюда.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1. ПРИМИТИВЫ (сырая палитра)
     --------------------------------------------------------- */
  --c-white: #ffffff;
  --c-black: #000000;

  --c-navy-950: #0b0c15;
  --c-navy-900: #0d0e18;
  --c-navy-850: #141624;
  --c-navy-800: #1a1b28;
  --c-navy-750: #1d2033;
  --c-navy-700: #232842;
  --c-navy-600: #2a2f52;

  --c-blue-700: #17608f;
  --c-blue-600: #1a6aa8;
  --c-blue-500: #1f75ba;
  --c-blue-400: #3b93d6;
  --c-blue-300: #6fb2e3;
  --c-blue-100: #dbeaf7;
  --c-blue-050: #eef5fb;

  --c-slate-800: #2b3242;
  --c-slate-700: #3d4a5c;
  --c-slate-600: #4b556b;
  --c-slate-500: #6b7488;
  --c-slate-400: #8a93a5;
  --c-slate-300: #b7bfcc;
  --c-slate-200: #d7dde6;
  --c-slate-100: #e8edf3;
  --c-slate-050: #f2f5f8;

  --c-red-600: #c81a24;
  --c-red-500: #e11d2c;
  --c-red-100: #fde3e4;

  --c-gold-500: #f4b400;

  --c-green-500: #1a9c4a;

  /* ---------------------------------------------------------
     2. СЕМАНТИЧЕСКИЕ ЦВЕТА
     --------------------------------------------------------- */
  --color-bg: var(--c-white);
  --color-bg-alt: var(--c-slate-050);
  --color-bg-muted: var(--c-slate-100);
  --color-surface: var(--c-white);
  --color-surface-dark: var(--c-navy-800);

  --color-text: var(--c-navy-800);
  --color-text-soft: var(--c-slate-600);
  --color-text-muted: #5c6675;
  --color-text-invert: var(--c-white);
  --color-text-invert-soft: #b9c2d6;
  --color-text-invert-muted: #9aa5bb;
  --color-text-on-scrim: #e7ecf5;
  --color-danger-soft: #fca5a5;

  /* прозрачные слои поверх тёмного */
  --color-on-dark-05: rgba(255, 255, 255, 0.05);
  --color-on-dark-08: rgba(255, 255, 255, 0.08);
  --color-on-dark-10: rgba(255, 255, 255, 0.1);
  --color-on-dark-20: rgba(255, 255, 255, 0.2);
  --color-on-dark-50: rgba(255, 255, 255, 0.5);
  --color-on-dark-60: rgba(255, 255, 255, 0.6);
  --color-on-dark-70: rgba(255, 255, 255, 0.7);

  --color-heading: var(--c-navy-800);
  --color-heading-alt: #1b3454;

  /* ховер кнопок (премиальный красный) */
  --color-cta-hover: #c9111d;
  --shadow-btn-hover: 0 6px 16px rgba(0, 0, 0, 0.32);

  --color-primary: var(--c-blue-500);
  --color-primary-hover: var(--c-blue-600);
  --color-primary-active: var(--c-blue-700);
  --color-primary-soft: var(--c-blue-100);
  --color-primary-tint: var(--c-blue-050);
  --color-primary-light: var(--c-blue-300);

  --color-accent: var(--c-red-500);
  --color-accent-hover: var(--c-red-600);

  --color-star: var(--c-gold-500);
  --color-success: var(--c-green-500);

  --color-border: var(--c-slate-200);
  --color-border-soft: var(--c-slate-100);
  --color-border-strong: var(--c-slate-300);
  --color-border-invert: rgba(255, 255, 255, 0.16);

  --color-overlay: rgba(245, 248, 252, 0.85);
  --color-scrim: rgba(11, 15, 30, 0.55);
  --color-scrim-strong: rgba(11, 15, 30, 0.78);

  /* ---------------------------------------------------------
     3. ТИПОГРАФИКА
     --------------------------------------------------------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-display: "Bebas Neue", "Inter", "Segoe UI", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.01em;
  --ls-wide: 0.02em;
  --ls-wider: 0.08em;

  /* fluid-шкала (mobile-first) */
  --fs-xs: 0.75rem;                                   /* 12 */
  --fs-sm: 0.8125rem;                                 /* 13 */
  --fs-body: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem);   /* 14→15 */
  --fs-md: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);          /* 15→16 */
  --fs-lg: clamp(1rem, 0.94rem + 0.4vw, 1.125rem);           /* 16→18 */
  --fs-xl: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);            /* 18→24 */
  --fs-2xl: clamp(1.25rem, 1.05rem + 1vw, 2rem);             /* 20→32 */
  --fs-3xl: clamp(1.375rem, 1rem + 1.8vw, 2.375rem);         /* 22→38 */
  --fs-4xl: clamp(1.5rem, 0.95rem + 2.3vw, 2.375rem); /* 24→38 */

  --fs-stat: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  --fs-stat-unit: 0.5em;

  /* слоган в подвале: подбирается так, чтобы не превышать ширину логотипа */
  --fs-slogan: 0.5rem;
  --ls-slogan: 0em;

  /* ---------------------------------------------------------
     4. РАССТОЯНИЯ
     --------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* вертикальный ритм секций */
  --section-py: clamp(2.5rem, 1.2rem + 3.5vw, 4.5rem);
  --section-gap: clamp(1.5rem, 1rem + 2vw, 3rem);

  /* ---------------------------------------------------------
     5. МАКЕТ
     --------------------------------------------------------- */
  --container-max: 1266px;
  --container-pad: 1rem;
  --container-pad-md: 1.5rem;
  --container-narrow: 960px;
  --paper: 100vw; /* ширина для полноэкранных карусельных секций */

  --header-topbar-h: 1.75rem;
  --header-main-h: 4rem;
  --header-nav-h: 2.25rem;

  /* ---------------------------------------------------------
     6. РАДИУСЫ
     --------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------
     7. ТЕНИ
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.16);
  --shadow-primary: 0 10px 24px rgba(31, 117, 186, 0.28);

  /* ---------------------------------------------------------
     8. ГРАНИЦЫ / ОБВОДКИ
     --------------------------------------------------------- */
  --border-w: 1px;
  --border: var(--border-w) solid var(--color-border);

  /* ---------------------------------------------------------
     9. АНИМАЦИИ
     --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  --transition-base: var(--dur-base) var(--ease-out);

  /* ---------------------------------------------------------
     10. Z-ИНДЕКСЫ
     --------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-menu: 300;
  --z-dropdown: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;

  /* ---------------------------------------------------------
     11. ТОЧКИ ПЕРЕЛОМА (справочно; в media нельзя var)
         sm 480 · md 768 · lg 1024 · xl 1280
     --------------------------------------------------------- */
}