/* ============================================================
   Айса — Design Tokens (единый источник правды)
   Подключается первым, до components.css и любых экранов.
   ============================================================ */

:root {
  /* ---------- Нейтральная гамма (primary, тёплый серый) ---------- */
  --bg:        #f4f4f1;   /* фон приложения */
  --surface:   #ffffff;   /* карточки, плашки, листы */
  --ink:       #1b1b19;   /* основной текст, заголовки */
  --ink-2:     #45453f;   /* вторичный текст */
  --muted:     #8c8c84;   /* подписи, мета */
  --line:      #eae9e3;   /* тонкий разделитель внутри карточек */
  --line-2:    #e0dfd8;   /* границы инпутов/карточек */

  /* ---------- Акцент: мята и оттенки ---------- */
  --mint-50:   #f0f8f4;   /* фон-подложка, бейджи */
  --mint-100:  #ddefe8;
  --mint-200:  #c2e5d8;   /* границы акцентных элементов */
  --mint-300:  #97d4c0;
  --mint-400:  #63c6ab;   /* база акцента (заливки, кнопки) */
  --mint-500:  #4cb497;   /* глубже — hover / вторая точка градиента */
  --mint-600:  #349a7e;   /* текст/иконки на светлом (контрастный) */
  --mint-700:  #257461;   /* тёмный текст на мятной подложке */

  /* ---------- Danger (удаление, отмена) ---------- */
  --danger:      #b4544f;
  --danger-bg:   #faeeee;
  --danger-bg-2: #fbf3f3;
  --danger-line: #e6cfcf;

  /* ---------- Семантические алиасы (используй в компонентах) ---------- */
  --accent:        var(--mint-400);
  --accent-strong: var(--mint-500);
  --accent-text:   var(--mint-600);
  --accent-soft:   var(--mint-50);
  --accent-border: var(--mint-200);

  /* ---------- Типографика ---------- */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;   /* заголовки, «голос» */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* текст, UI */

  --fs-display: 34px;  --lh-display: 1.15;   /* крупные заголовки экранов */
  --fs-h1:      26px;  --lh-h1: 1.2;         /* заголовок экрана */
  --fs-h2:      18px;  --lh-h2: 1.25;        /* заголовок карточки/секции */
  --fs-body:    15px;  --lh-body: 1.5;       /* основной текст */
  --fs-sm:      13px;  --lh-sm: 1.45;        /* вторичный текст */
  --fs-caption: 12px;  --lh-caption: 1.4;    /* подписи, мета */
  --fs-label:   12.5px;                      /* uppercase-лейблы секций */

  /* ---------- Скругления ---------- */
  --r-sm:  14px;   /* инпуты, мелкие элементы */
  --r-md:  20px;   /* карточки, списки */
  --r-lg:  26px;   /* крупные карточки, герой */
  --r-btn: 16px;   /* кнопки */
  --r-pill: 999px; /* бейджи, чипы, тумблеры */

  /* ---------- Тени ---------- */
  --shadow:    0 1px 2px rgba(24,24,20,.04), 0 8px 24px rgba(24,24,20,.05);   /* карточки */
  --shadow-btn: 0 6px 18px rgba(76,180,151,.35);                             /* акцентные кнопки */
  --shadow-sheet: 0 -12px 40px rgba(24,24,20,.16);                           /* нижние листы */

  /* ---------- Градиенты ---------- */
  --grad-accent: linear-gradient(135deg, var(--mint-400), var(--mint-500));  /* кнопки, отправка */
  --grad-avatar: linear-gradient(140deg, var(--mint-300), var(--mint-500));  /* аватар Айсы */

  /* ---------- Отступы (шаг 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---------- Иконки ---------- */
  /* Набор: Tabler Icons (MIT). viewBox 24×24, stroke=2, round caps/joins, fill=none.
     В реальном приложении подключить @tabler/icons или SVG-спрайт; размер — через .icon. */
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
}