/* =========================================================
   «три» — брендбук. Дизайн-токены.
   Зеркало TRIDesignSystem.md (приложение) и лендинга.
   Монохром, холодный чёрный, цвет — точечно.
   ========================================================= */

:root {
  /* Чернила — холодная чёрная шкала */
  --ink-0: #050507;
  --ink-1: #0a0a0e;
  --ink-2: #14141a;
  --ink-3: #1b1c24;
  --ink-4: #2a2c36;

  /* Бумага / текст */
  --paper:   #ffffff;
  --paper-2: #b8b8c2; /* вторичный текст — ~10:1 на ink-0 */
  --paper-3: #8a8d97; /* приглушённый текст — проходит AA 4.5:1 на ink-0 (~6:1) */
  --paper-4: #4a4d56; /* ТОЛЬКО декор: линии, точки, буллеты — не для читаемого текста */

  /* Линии */
  --line:        rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Акцент — синий, только активное состояние / главное действие (точечно) */
  --brand: #0a6cff;

  /* Функциональные сигналы показателей (как в приложении: зелёный = тело/норма, красный = тревога) */
  --heart:  #ff3b30; /* пульс, стресс, риск */
  --energy: #ff9f0a; /* нагрузка, калории */
  --body:   #34c759; /* восстановление, сон, HRV, тело, движение */
  --breath: #5ac8fa; /* дыхание, SpO₂ */

  /* Типографика — две гарнитуры, без моноширинной */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* ⚠️ алиас на sans: моноширинные запрещены брендбуком, имя историческое */
  --font-mono: var(--font-sans);

  /* Радиусы */
  --r-chip: 10px;
  --r-control: 14px;
  --r-button: 999px;
  --r-card: 24px;
  --r-hero: 32px;

  /* Отступы — сетка 4pt */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Плавности. spring — ТОЛЬКО для отклика управления (тап, переключатель),
     контент всегда ease-out без перескока. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Полосы контента */
  --edge: min(100% - 48px, 1240px);
  --narrow: min(100% - 48px, 820px);

  color-scheme: dark;
}