/* ============================================
   ТОКЕНЫ — единая точка правды для всего сайта
   Меняешь значение здесь — меняется везде.
   ============================================ */

:root {
  /* --- Цвета --- */
  --color-brand: #0049FF;          /* основной синий */
  --color-brand-deep: #004ACA;     /* тёмный синий, из градиента логотипа */
  --color-surface: #FFFFFF;        /* белые плашки: шапка, карточки */
  --color-tint: #E9F0FF;           /* лёгкий фирменный оттенок для подложек */
  --color-ink: #0A0A0A;            /* основной текст на белом */
  --color-ink-soft: #5B5B5B;       /* второстепенный текст на белом */

  /* Цвета поверх синего фона */
  --color-on-brand: #FFFFFF;
  --color-on-brand-muted: rgba(255, 255, 255, 0.75);
  --color-on-brand-border: rgba(255, 255, 255, 0.55);
  --color-decor: rgba(255, 255, 255, 0.10);   /* декоративные дуги на фоне */

  /* --- Шрифты --- */
  /* Браузер идёт слева направо и берёт первый доступный.
     Apple-устройства получат родной SF Pro, остальные — Inter. */
  --font-base: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  /* Размеры. clamp(минимум, гибкое значение, максимум) —
     размер сам подстраивается под ширину экрана. */
  --fs-h1: clamp(2.125rem, 5.75vw, 5.25rem);  /* 34px → 84px, в одну строку на 1440 */
  --fs-lg: clamp(1rem, 1.5vw, 1.375rem);      /* 16px → 22px  — текст кнопок */
  --fs-md: 0.9375rem;                          /* 15px — телефон */
  --fs-sm: 0.75rem;                            /* 12px — «Связаться с нами» */

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

  --lh-tight: 1.05;   /* для крупного заголовка */
  --lh-base: 1.4;

  /* --- Отступы (шкала кратна 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Скругления --- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* --- Размеры макета --- */
  --container-max: 1200px;   /* ширина контента: 1440 - 120 - 120 */
  --container-pad: 24px;     /* боковые поля на узких экранах */

  --header-h: 72px;          /* высота белой плашки шапки */
  --control-h: 65px;         /* высота кнопок первого экрана */
  --icon-btn-size: 32px;     /* квадратные иконки соцсетей */
}

/* На планшетах и телефонах отступы и высоты ужимаем */
@media (max-width: 768px) {
  :root {
    --header-h: 60px;
    --control-h: 54px;
    --container-pad: 16px;
  }
}