/* ============================================================
   variables.css — дизайн-токены проекта
   Светлая база как в референсе: серый фон, белые карточки,
   точечные тёмные блоки (hero, «что нас определяет», CTA, цифры).
   Все цвета сайта берутся ТОЛЬКО отсюда — hex по коду не хардкодим.
   ============================================================ */

/* --- основной шрифт: Google Sans (variable, wght 400–700) --- */
@font-face {
  font-family: 'Google Sans';
  src: url('../assets/fonts/GoogleSans-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/GoogleSans-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('../assets/fonts/GoogleSans-Italic-Variable.ttf') format('truetype-variations'),
       url('../assets/fonts/GoogleSans-Italic-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
:root {
  /* --- светлая база --- */
  --bg-page: #eceef0;            /* основной светло-серый фон */
  --bg-card: #ffffff;            /* белые карточки */
  --bg-panel-light: #e3e6e9;     /* серые панели-вставки */
  --border: rgba(15, 18, 22, 0.08);
  --shadow-card: 0 1px 2px rgba(15, 18, 22, 0.04);

  /* --- тёмные блоки --- */
  --bg-dark: #0b0d10;            /* hero, CTA, тёмные карточки-фичи */
  --bg-dark-soft: #16181c;       /* тёмные карточки в списках */
  --border-dark: rgba(255, 255, 255, 0.1);

  /* --- текст на светлом --- */
  --text-primary: #0f1216;
  --text-secondary: #5c6672;
  --text-dim: #98a1ab;

  /* --- текст на тёмном --- */
  --on-dark: #f2f5f8;
  --on-dark-secondary: #a6afba;
  --on-dark-dim: #626b75;

  /* --- акценты (телеметрия / норма / внимание / канал связи) --- */
  --accent-telemetry: #2fb9e8;
  --accent-ok: #35c885;
  --accent-warn: #ffb020;
  --accent-link: #7c8cff;

  /* --- типографика (черновая, шрифты уточняются позже) --- */
  --font-main: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-h1: clamp(32px, 5.4vw, 76px);
  --fs-h2: clamp(26px, 3.9vw, 58px);
  --fs-h3: clamp(19px, 1.8vw, 24px);
  --fs-body: 16px;
  --fs-small: 13px;
  --lh-tight: 1.08;
  --lh-body: 1.55;

  /* --- геометрия --- */
  --container: 1400px;
  --gutter: clamp(16px, 3vw, 48px);
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* --- отступы --- */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: clamp(72px, 9vw, 140px);   /* вертикальный ритм секций */

  /* --- анимации UI --- */
  --transition: 0.2s ease;
}