/* ============================================================
   DESIGN TOKENS — единый концепт дизайна сайта «ЭСТОМ»
   Цвета, радиусы, тени, шрифты, отступы, ховер-эффекты.
   Все компоненты сайта используют только эти значения.
   ============================================================ */

:root {
  /* ---------- Цвета: фирменная палитра ---------- */
  --color-primary: #1d56c7;        /* основной синий */
  --color-primary-dark: #1a2f9b;   /* тёмный синий (hover) */
  --color-primary-deep: #212b7c;   /* глубокий синий (футер, градиенты) */
  --color-primary-light: #2f6cd9;  /* светлый синий (конец градиентов) */
  --color-accent: #f7b321;         /* золотой (звёзды, акценты) */

  /* ---------- Цвета: текст ---------- */
  --color-ink: #23262b;            /* основной текст, заголовки */
  --color-text: #3a4149;           /* текст карточек и статей */
  --color-muted: #66707d;          /* второстепенный текст */
  --color-muted-2: #7a8494;        /* подписи, даты */
  --color-faint: #98a2b3;          /* самые блеклые подписи, коды */

  /* ---------- Цвета: поверхности и линии ---------- */
  --color-surface: #fff;                 /* карточки */
  --color-surface-alt: #f2f6fc;          /* подложка секций/кнопок */
  --color-surface-soft: #f6f8fc;         /* фон фото, мягкая подложка */
  --color-line: #e5eaf2;                 /* основная линия/рамка */
  --color-line-soft: #eef1f7;            /* тонкие разделители */
  --color-line-strong: #dbe3ee;          /* выраженная рамка */

  /* ---------- Цвета: ховер-эффекты (никакого серого) ---------- */
  --color-hover: #eef4fd;                /* ховер-подложка — фирменный светло-голубой */
  --color-hover-strong: #e3eaf5;         /* ховер-подложка — сильнее */
  --color-hover-line: var(--color-primary); /* ховер-рамка/текст — основной синий */

  /* ---------- Радиусы ---------- */
  --radius-1: 8px;
  --radius-2: 10px;
  --radius-3: 12px;
  --radius-4: 14px;
  --radius-5: 16px;
  --radius-6: 18px;
  --radius-7: 20px;
  --radius-8: 22px;
  --radius-9: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- Тени ---------- */
  --shadow-xs: 0 2px 8px rgba(26, 47, 155, .06);
  --shadow-sm: 0 4px 16px rgba(26, 47, 155, .06);
  --shadow-md: 0 10px 30px rgba(26, 47, 155, .10);
  --shadow-btn: 0 6px 16px rgba(29, 86, 199, .28);
  --shadow-fab: 0 10px 26px rgba(10, 16, 60, .22);
  --shadow-lg: 0 30px 80px rgba(10, 16, 60, .35);
  --shadow-header: 0 4px 60px rgba(3, 34, 67, .16);
  --shadow-header-scrolled: 0 8px 30px rgba(3, 34, 67, .22);

  /* ---------- Типографика ---------- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-13-5: 13.5px;
  --fs-14: 14px;
  --fs-14-5: 14.5px;
  --fs-15: 15px;
  --fs-15-5: 15.5px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-h2: clamp(26px, 3.4vw, 36px);
  --fs-h1: clamp(30px, 4.4vw, 46px);
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---------- Отступы ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 52px;

  /* ---------- Контейнер ---------- */
  --container-max: 1200px;
  --container-pad: 20px;

  /* ---------- Анимация ---------- */
  --transition-fast: .12s ease;
  --transition: .15s ease;
  --transition-slow: .25s ease;

  /* ============================================================
     ЛЕГАСИ-АЛИАСЫ (старые имена переменных → токены)
     ============================================================ */
  --rv-blue: var(--color-primary);
  --rv-blue-dark: var(--color-primary-dark);
  --rv-blue-deep: var(--color-primary-deep);
  --rv-ink: var(--color-ink);
  --rv-muted: var(--color-muted);
  --rv-line: var(--color-line);
  --rv-bg: var(--color-surface-alt);
  --rv-gold: var(--color-accent);
  --rv-shadow: var(--shadow-md);
  --rv-line-soft: var(--color-line-soft);
  --rv-line-strong: var(--color-line-strong);
  --rv-muted-2: var(--color-muted-2);
  --rv-faint: var(--color-faint);
  --rv-text: var(--color-text);
}

/* ---------- Контейнер (общий для всех секций и шапки) ---------- */

.rv-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}