/* Токены дизайн-системы Sineca AI — дословно из design_handoff_sineca_ai/README.md (источник истины) */
:root {
  /* ── Нейтрали (прохладный серый) ── */
  --color-canvas: #E6E7EA;      /* фон страницы */
  --color-surface: #FFFFFF;     /* карточки, панели */
  --color-fill: #EEEFF1;        /* чипы, bubble, подложки */
  --color-fill-soft: #F4F5F6;   /* шапки, отзыв */
  --color-line: #E2E3E6;        /* границы */
  --color-divider: #D7D8DC;
  --color-faint: #A6A8AE;       /* плейсхолдер, disabled-текст */
  --color-radio-ring: #C3C5CB;  /* кольцо radio (из строки Faint) */
  --color-muted: #767981;       /* вторичный текст */
  --color-body: #45474D;        /* основной текст */
  --color-ink: #24262B;         /* заголовки, текст на primary-кнопке */
  --color-chat-surface: #FAFBFC;       /* фон колонки чата в едином пространстве (раздел 5) */
  --color-workspace-divider: #ECEDEF;  /* разделитель шапки/колонок единого пространства */
  --color-label-faint: #B0B2B8;        /* подпись «AI-подбор курсов» в шапке фрейма */
  --color-send-muted-bg: #DDEAF3;      /* кнопка отправки при пустом поле — приглушённая */
  --color-send-muted-fg: #8FB2C9;      /* стрелка приглушённой кнопки отправки */

  /* ── Голубой — бренд и действия ── */
  --color-blue-50: #EDF4F9;
  --color-blue-100: #DCEAF3;
  --color-blue-200: #C7DEEC;
  --color-blue-300: #B5D1E6;    /* primary-кнопки, отправка */
  --color-blue-400: #93B9D6;    /* hover */
  --color-blue-600: #4E83A6;    /* кольца/radio/иконки/прогресс/фокус */
  --color-blue-700: #3C6E86;    /* ссылки, ghost-текст */

  /* ── Зелёный — промокоды / выгода / успех ── */
  --color-green-50: #EEF6E4;
  --color-green-100: #DFEFCD;
  --color-green-200: #CDE6B2;
  --color-green-300: #B7DC91;   /* плашка промокода */
  --color-green-400: #9BC96D;
  --color-green-600: #5F8F32;   /* текст */
  --color-green-700: #4C7327;

  /* ── Жёлтый — тёплый акцент, рейтинг ── */
  --color-yellow-50: #FBF4E1;
  --color-yellow-100: #F6E9C6;
  --color-yellow-200: #EFDAA4;
  --color-yellow-300: #E9CC8A;
  --color-yellow-400: #DCB65E;
  --color-yellow-500: #C79A34;
  --color-yellow-600: #9C7A1F;  /* текст */
  --color-star: #D9A43A;        /* звезда рейтинга */

  /* ── Терракота — точечный акцент / деструктив (использовать по минимуму) ── */
  --color-terra-50: #F6ECE6;
  --color-terra-100: #EBD3C8;
  --color-terra-200: #E4BBAA;
  --color-terra-500: #C37356;
  --color-terra-600: #A8503A;   /* текст/иконка удаления */

  /* ── Типографика — Onest (self-hosted, 400/500/600/700/800) ── */
  --font-family: 'Onest', system-ui, -apple-system, sans-serif;
  --text-display-size: 40px;    --text-display-weight: 800; --text-display-tracking: -0.03em;
  --text-h1-size: 30px;         --text-h1-weight: 800;      --text-h1-tracking: -0.02em;
  --text-h2-size: 24px;         --text-h2-weight: 700;      --text-h2-tracking: -0.01em;
  --text-h3-size: 19px;         --text-h3-weight: 700;
  --text-body-size: 15px;       --text-body-weight: 400;    --text-body-line: 1.5;
  --text-small-size: 13px;      --text-small-weight: 500;
  --text-caption-size: 12px;    --text-caption-size-min: 11.5px; --text-caption-weight: 500; /* README: 11.5–12 */
  --text-eyebrow-size: 12px;    --text-eyebrow-weight: 700; --text-eyebrow-tracking: 0.09em; /* + UPPERCASE */

  /* ── Скругления: 8 (мелкое) · 10–12 (кнопки, поля) · 14–16 (карточки) · 18–20 (панели, tool-card) · 100px (пилюли) ── */
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-pill: 100px;

  /* ── Тени (прохладные) ── */
  --shadow-sm: 0 1px 2px rgba(20,22,28,.06);
  --shadow-md: 0 4px 14px rgba(20,22,28,.08);
  --shadow-lg: 0 12px 30px rgba(20,22,28,.10);

  /* ── Ритм отступов — шаг 4px ── */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px;
  --space-48: 48px;

  /* ── Кнопки: размеры (sm h36/r10 · md h46/r12 · lg h54/r14) ── */
  --btn-h-sm: 36px; --btn-r-sm: 10px;
  --btn-h-md: 46px; --btn-r-md: 12px;
  --btn-h-lg: 54px; --btn-r-lg: 14px;

  /* ── Затемнение чата под панелью истории (README, раздел «История чатов») ── */
  --color-scrim: rgba(17,24,39,.16);
}