/**
 * Design tokens — прямое соответствие 3dlab-design-system.md
 * Единственное место, где определяются цвета/типографика/отступы.
 * Все остальные стили и Elementor-виджеты используют только эти переменные —
 * ни одного хардкод-цвета вне этого файла.
 */

:root {
  /* --- Цвет (design-system.md, раздел 1) --- */
  --bg-base: #0A0C10;
  --bg-surface: #12151B;
  --bg-surface-2: #1B1F27;
  --border-hairline: #262B34;

  --text-primary: #F4F6F8;
  --text-secondary: #9AA3AF;
  --text-muted: #5D6470;

  --accent-blue: #2F6FED;
  --accent-cyan: #3FD0E0; /* только для 3D-сцены и точечных акцентов — не в обычном UI */
  --chrome: #C7CDD6;

  --danger: #E5484D;
  --success: #3DD68C;

  --overlay-blue-soft: rgba(47, 111, 237, 0.08);
  --overlay-white-soft: rgba(255, 255, 255, 0.04);
  --focus-ring: rgba(47, 111, 237, 0.15);

  /* --- Типографика (раздел 2) --- */
  --font-family-base: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --h1-hero-desktop: 64px;
  --h1-hero-mobile: 34px;
  --h1-page-desktop: 44px;
  --h1-page-mobile: 28px;
  --h2-desktop: 32px;
  --h2-mobile: 24px;
  --h3-desktop: 22px;
  --h3-mobile: 18px;
  --body-lg-desktop: 18px;
  --body-lg-mobile: 16px;
  --body-desktop: 16px;
  --body-mobile: 15px;
  --caption-desktop: 13px;
  --caption-mobile: 12px;

  --line-height-heading: 1.15;
  --line-height-body: 1.6;

  /* --- Сетка и отступы (раздел 3) --- */
  --container-max-width: 1280px;
  --container-padding-desktop: 5vw;
  --container-padding-mobile: 20px;
  --grid-gap-desktop: 24px;
  --grid-gap-mobile: 16px;
  --section-spacing-desktop: 120px;
  --section-spacing-mobile: 64px;
  --card-padding-desktop: 32px;
  --card-padding-mobile: 20px;

  /* --- Радиусы и переходы --- */
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-card-flagship: 24px;
  --transition-fast: 150ms ease-out;
  --transition-medium: 200ms ease-out;
  --transition-reveal: 400ms ease-out;
}

/* prefers-reduced-motion — глобальный оверрайд (design-system.md, раздел 8) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}