/* Дизайн-система интерфейса «Мой путь развития».
 *
 * Все значения сняты из макета Figma через MCP (FRAME 1 -- узел 5:24,
 * FRAME 4 -- узел 10:2), а не подобраны с картинки. Если при вёрстке
 * понадобится значение, которого здесь нет, -- снять его из макета и добавить
 * сюда, а не задать по месту: иначе через месяц никто не отличит цвет из
 * макета от цвета «на глаз», и правка одного экрана начнёт расходиться
 * с остальными.
 */
:root {
  /* --- Цвет ------------------------------------------------------------ */
  --accent: #1267e8;          /* кнопки, ссылки, активный пункт, полоса прогресса */
  --accent-dark: #0f57c6;     /* наведение: тот же цвет на шаг темнее */
  --ink: #10213f;             /* заголовки и названия */
  --ink-nav: #31405b;         /* неактивные пункты навигации */
  --ink-meta: #42516c;        /* метаданные карточки: часы, направление */
  --ink-muted: #61708a;       /* вторичный текст, подписи, «Шаг 3 из 5» */
  --ink-soft: #566782;        /* текст внутри баннера */
  --brand-sub: #465773;       /* подпись под логотипом */
  --decor: #8aa6ca;           /* стрелки маршрута и прочий декор */

  --tint: #eff5ff;            /* фон чипа */
  --tint-panel: #eef6ff;      /* фон баннера и выбранной плитки */
  --tint-icon: #eaf3ff;       /* круглая подложка под иконкой */
  --line: #d9e4f3;            /* граница карточки и невыбранной плитки */
  --line-panel: #d5e6fb;      /* граница баннера */
  --line-soft: #e7edf5;       /* разделитель внутри карточки */
  --line-btn: #bfd2ee;        /* граница второстепенной кнопки */
  --track-bg: #e6ecf4;        /* подложка полосы прогресса */

  --ok-bg: #e9f8f0;           /* «Рекомендуем в первую очередь» */
  --ok-ink: #1f8b5b;
  --page-top: #f4f9ff;        /* верх фонового градиента к белому */
  --surface: #ffffff;

  /* В макете два близких градиента фона (#f4f9ff и #f8fbff) и три оттенка
   * фона чипа (#eff5ff, #eef5ff, #eef6ff). Сведены к перечисленному:
   * разница неразличима глазом, а четыре почти одинаковых значения
   * расходятся при первой же правке. */

  /* --- Скругления ------------------------------------------------------ */
  --radius-card: 16px;
  --radius-tile: 12px;
  --radius-btn: 10px;
  --radius-chip: 8px;
  --radius-bar: 4px;

  /* --- Тени ------------------------------------------------------------ */
  --shadow-header: 0 2px 8px rgba(36, 60, 98, .07);
  --shadow-card: 0 5px 16px rgba(80, 98, 127, .09);
  --shadow-card-hover: 0 10px 24px rgba(80, 98, 127, .14);
  --shadow-panel: 0 8px 20px rgba(80, 98, 127, .1);

  /* --- Размеры --------------------------------------------------------- */
  --container: 1344px;
  --gutter: 48px;
  --header-h: 84px;
  --card-w: 408px;
  --card-h: 288px;
  --grid-gap: 36px;
  --tile-w: 280px;
  --tile-h: 92px;
  --wizard-w: 1000px;

  /* --- Типографика ----------------------------------------------------- */
  --font: Inter, "Segoe UI", system-ui, sans-serif;
  --fs-page: 38px;      /* заголовок страницы */
  --fs-brand: 25px;     /* логотип */
  --fs-question: 27px;  /* вопрос в мастере */
  --fs-panel: 24px;     /* заголовок крупной панели */
  --fs-card: 20px;      /* название курса, заголовок секции */
  --fs-lead: 16px;      /* подзаголовок страницы, название плитки */
  --fs-sub: 15px;       /* подзаголовок блока */
  --fs-base: 14px;      /* текст, кнопки, навигация */
  --fs-meta: 13px;      /* метаданные, ссылки, счётчик выбора */
  --fs-chip: 12px;      /* чипы, подпись бренда */
  --fs-tiny: 11px;      /* должность в шапке */
}