/* Дизайн-токены v5 (28.06.2026) — раздел 3 README из design_handoff_delovbege.

   Единая система переменных для редизайна. Постепенно мигрируем все экраны
   с inline-стилей и legacy переменных на эту систему.

   Подключение: <link rel="stylesheet" href="/static/css/design-tokens.css">
   + Google Fonts Manrope + Oswald (см. base.html).
*/

:root {
  /* ───────── Цвета ───────── */
  --v5-navy-900: #0b1240;   /* основной тёмный (шапка, тёмные секции) */
  --v5-navy-800: #11163a;   /* карточки на тёмном */
  --v5-navy-700: #20264f;   /* разделители на navy */
  --v5-navy-600: #2a3060;   /* бордеры на navy */
  --v5-ink:      #15183b;   /* основной текст на светлом */

  --v5-orange-500: #ee5a24; /* акцент/бренд (кнопки) */
  --v5-orange-300: #ff8a5f; /* акцент на тёмном (цифры на navy) */

  --v5-bg:        #f4f5fb;  /* фон body */
  --v5-surface:   #ffffff;  /* карточки */

  /* A11Y-1 (01.07): muted затемнён для контраста ≥4.5:1 (WCAG AA normal).
     Было: #6b7193 (4.0:1 FAIL), #8a8fb5 (3.1:1 FAIL vs #fff). */
  --v5-muted:     #5a6084;  /* вторичный текст, WCAG AA normal */
  --v5-muted-2:   #6b7193;  /* третичный (large-text ≥18px), WCAG AA large */

  --v5-border:    #e4e7f2;  /* основные бордеры/разделители */
  --v5-border-2:  #eef0f7;  /* тонкие разделители */
  --v5-chip-bg:   #f1f2fa;  /* фон тегов/чипов */

  --v5-success:        #1f8a5b;
  --v5-success-bg:     #f1f8f4;
  --v5-success-border: #d6ebdf;
  --v5-danger:         #c0455b;
  --v5-danger-bg:      #fdf3f4;
  --v5-danger-border:  #f0d7da;
  --v5-info:           #2a6fdb;
  --v5-vk:             #0077ff;

  /* ───────── Типографика ───────── */
  --v5-font-display: 'Oswald', sans-serif;  /* заголовки, крупные цифры, кикеры — uppercase */
  --v5-font-text:    'Manrope', sans-serif; /* параграфы, UI, кнопки */

  --v5-h1-desktop: clamp(40px, 4vw, 64px);
  --v5-h2-desktop: clamp(26px, 2.5vw, 40px);
  --v5-h1-mobile:  clamp(26px, 6vw, 32px);
  --v5-h2-mobile:  clamp(19px, 4vw, 22px);
  --v5-lead:       17px;
  --v5-body:       15.5px;
  --v5-caption:    13px;
  --v5-line:       1.6;

  /* ───────── Радиусы ───────── */
  --v5-r-pill:    30px;     /* кнопки */
  --v5-r-pill-sm: 26px;     /* кнопки мобайл */
  --v5-r-card-lg: 22px;     /* крупные карточки */
  --v5-r-card:    18px;     /* обычные карточки */
  --v5-r-card-sm: 14px;     /* мелкие карточки */
  --v5-r-chip:    20px;     /* пилюля-чип */
  --v5-r-tag:     8px;      /* квадратный тег */

  /* ───────── Тени ───────── */
  --v5-shadow-card:    0 4px 18px rgba(11, 18, 64, 0.06);
  --v5-shadow-card-sm: 0 3px 14px rgba(11, 18, 64, 0.05);
  --v5-shadow-elev:    0 10px 36px rgba(11, 18, 64, 0.12);
  --v5-shadow-float:   0 16px 34px rgba(11, 18, 64, 0.22);

  /* ───────── Отступы ───────── */
  --v5-container:        1200px;
  --v5-container-narrow: 1080px;
  --v5-pad-x:            32px;
  --v5-pad-x-mobile:     20px;
  --v5-sec-y:            58px;
}

/* ───────── Базовые утилиты v5 ───────── */
.v5-page { background: var(--v5-bg); color: var(--v5-ink); font-family: var(--v5-font-text); }
.v5-container { width: 100%; max-width: var(--v5-container); margin: 0 auto; padding: 0 var(--v5-pad-x); box-sizing: border-box; }
@media (max-width: 720px) {
  .v5-container { padding: 0 var(--v5-pad-x-mobile); }
}

.v5-h1 { font-family: var(--v5-font-display); font-weight: 700; font-size: var(--v5-h1-desktop); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0; }
.v5-h2 { font-family: var(--v5-font-display); font-weight: 700; font-size: var(--v5-h2-desktop); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; margin: 0; }
.v5-kicker { font-family: var(--v5-font-text); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; color: var(--v5-orange-500); text-transform: uppercase; }

.v5-btn-primary {
  background: var(--v5-orange-500); color: #fff; border: none;
  border-radius: var(--v5-r-pill); padding: 17px 34px;
  font-family: var(--v5-font-text); font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; display: inline-block; transition: filter 0.15s;
}
.v5-btn-primary:hover { filter: brightness(0.95); color: #fff; }

.v5-btn-secondary {
  background: var(--v5-chip-bg); color: var(--v5-navy-900); border: none;
  border-radius: var(--v5-r-pill); padding: 17px 34px;
  font-family: var(--v5-font-text); font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.15s;
}
.v5-btn-secondary:hover { background: #e8eaf6; color: var(--v5-navy-900); }