/* Дизайн-токены 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: #c7431a; /* ORANGE-CALIBRATE (08.07): #ee5a24 → #c7431a — Owner: «более благородный, спокойный». Приглушённый терракот, тот же оттенок что --v5-orange-text. Бонус: контраст 4.65:1 AA normal на #fff (было 3.43:1 = только large). */
  --v5-orange-300: #ff8a5f; /* акцент на тёмном (цифры на navy) */
  /* ORANGE-TEXT-CONTRAST (03.07 v6 audit): для текста-ссылок / CTA-текста <18px на #fff.
     Было hardcoded #EE5A24 в 10+ местах, контраст 3.43:1 (мимо AA). Теперь #C7431A = 4.65:1. */
  --v5-orange-text: #c7431a; /* текст ссылок / CTA-строки 13-15px — 4.65:1 на #fff (AA normal) */

  --v5-bg:        #f4f5fb;  /* фон body */
  --v5-surface:   #ffffff;  /* карточки */
  /* D4 (17.07): «tint» — мягкий фон для inline-нотисов/подсказок внутри
     карточек (было хардкодом #f5f7fb в cabinet). */
  --v5-surface-tint: #f5f7fb;

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

  /* U1 fix (D129, 20.07): контраст на navy-фоне. Раньше --v5-muted
     (#5a6084) калиброван под белый ≥4.5:1, но на navy (#1a1f3a) даёт
     ~2.9:1 — WCAG AA fail. Бьёт по .lv5-trust («1 минута · email +
     пароль») и таглайну в шапке — критично для холодного трафика.
     `--v5-muted-on-navy` — светлый оттенок, ≥4.5:1 на navy. */
  --v5-muted-on-navy: #a5abd2;

  --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;
  /* F10 (D99, 17.07): «мягкий» danger-фон для чипов «Новая» в feedback/moderation
     (раньше #fdeae7 хардкодом в 3+ шаблонах). AA на #B23511 = 7.13. */
  --v5-danger-soft-bg: #fdeae7;
  /* F10 (D99): warning-палитра — 3 янтаря (#d98a2b, #d97706, #f39c12) сведены к
     одному токену. cabinet/_base.html + coach/home.html теперь на этом. */
  --v5-warning:        #d97706;
  --v5-warning-bg:     #fef4e6;
  --v5-warning-border: #f3d59c;
  --v5-info:           #2a6fdb;
  /* П2 alerts (день B дизайна, 22.07): info-палитра для «единого alert».
     bg на 5.0+ контрастом к --v5-info для WCAG AA normal. */
  --v5-info-bg:        #eef4fd;
  --v5-info-border:    #cddcf3;
  --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 ───────── */
/* C3 (08.07): удалён `.v5-page` — 0 использований в шаблонах (dead CSS). */
.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; }
/* Контраст-хвост (06.07 Deploy 12, аудит v9): .v5-kicker — 13px 600 uppercase.
   `--v5-orange-500` (3.43:1) на белом = <AA даже для «large ≥14px bold».
   Заменено на `--v5-orange-text` (4.65:1 AA normal), сохранён брендинг. */
.v5-kicker { font-family: var(--v5-font-text); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; color: var(--v5-orange-text); 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); }

/* ============================================================
   П2 alerts (день B дизайна, 22.07) — единый компонент баннеров.
   До этого 3+ шаблона рендерили ад-хок «баннер»-стили inline
   (managers/list flash-password, feedback/ask_org just_sent,
   moderation notes) — 4-5 разных вариаций padding/border/цвета,
   разные семантические цвета выбирались рандомно.

   Использование:
       <div class="v5-alert v5-alert-success">Отчёт принят + 10 баллов</div>
       <div class="v5-alert v5-alert-warn">Регистрация закрывается через 2 дня</div>
       <div class="v5-alert v5-alert-danger">Отчёт отклонён — фото не читается</div>
       <div class="v5-alert v5-alert-info">Новая неделя откроется в понедельник</div>

   Токены: --v5-{success,warning,danger,info}(-bg|-border|-fg по семантике).
   ============================================================ */
.v5-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 12px;
  font-family: var(--v5-font-text); font-size: 13.5px; line-height: 1.45;
  border: 1px solid transparent;
}
.v5-alert-success { background: var(--v5-success-bg); border-color: var(--v5-success-border); color: var(--v5-success); }
.v5-alert-warn    { background: var(--v5-warning-bg); border-color: var(--v5-warning-border); color: var(--v5-warning); }
.v5-alert-danger  { background: var(--v5-danger-bg);  border-color: var(--v5-danger-border);  color: var(--v5-danger);  }
.v5-alert-info    { background: var(--v5-info-bg);    border-color: var(--v5-info-border);    color: var(--v5-info);    }
.v5-alert > strong { color: inherit; }
/* Тело обычного текста внутри баннера — тёмный ink для длинных сообщений
   (заголовок цвета семантики, текст — читаемый). */
.v5-alert-body { color: var(--v5-ink); font-weight: 500; }