/* Токены дизайн-системы сайта «Интонация». Источник — design/brand/brandbook.html, раздел «Токены». */
:root {
  /* Цвет */
  --paper: #f9f9f7;          /* бумага: фон страницы и карточек */
  --ink: #000000;            /* тушь: рамки, текст, штрих иконок и знака */
  --lime: #edfe5e;           /* главный акцент, цвет знака и слова into */
  --cornflower: #bed4fb;     /* второй акцент */
  --spring: #31e992;         /* статусный акцент */
  --sage: #d2ddd2;           /* мягкая рамка, тетрадная клетка */
  --mist: #dee5dd;           /* второстепенный штрих */
  --paper-shadow: #edf0e9;   /* нейтральная и отключённая кнопка, hover */
  --smoke: #c7c7c6;          /* плейсхолдер */

  /* Только для иллюстраций, в интерфейсе не используются */
  --ill-coral: #f7a08a;
  --ill-teal: #7fbfae;
  --ill-pink: #f8c9c4;
  --ill-navy: #4d5a6b;
  --ill-sand: #e8caa2;

  /* Шрифт: все три хостятся на сайте, см. HANDOFF.md */
  --font-sans: "Golos Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Cormorant", "Times New Roman", Georgia, serif;
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;

  --text-display: 68px;    --leading-display: 0.86;    --tracking-display: -0.001em;
  --text-heading: 57px;    --leading-heading: 1.04;    --tracking-heading: 0.002em;
  --text-heading-sm: 28px; --leading-heading-sm: 1.07; --tracking-heading-sm: -0.002em;
  --text-subheading: 20px; --leading-subheading: 1.15; --tracking-subheading: 0.025em;
  --text-body-lg: 18px;    --leading-body-lg: 1.27;    --tracking-body-lg: 0.067em;
  --text-body: 15px;       --leading-body: 1.18;       --tracking-body: 0.04em;
  --text-caption: 11px;    --leading-caption: 1;       --tracking-caption: 0.067em;

  /* Сетка */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 20px;
  --nav-gap: 23px;

  /* Форма */
  --radius-sm: 3px;
  --radius-btn: 6px;
  --radius-card: 12px;
  --radius-pill: 24px;
  --shadow-btn: rgba(0, 0, 0, 0.2) 0 2px 6px 0;   /* единственная тень, только на кнопке */
}

/* Телефон: та же шкала, меньше кегль */
@media (max-width: 640px) {
  :root {
    --text-display: 40px;  --leading-display: 0.9;
    --text-heading: 32px;
    --text-heading-sm: 24px;
    --section-gap: 60px;
    --card-padding: 16px;
    --element-gap: 16px;
  }
}

/* Вордмарк: <span class="wm"><span class="in">into</span>нация</span> */
.wm { font: 700 1em/1 var(--font-sans); letter-spacing: -0.02em; white-space: nowrap; }
.wm .in { background: var(--lime); border-radius: var(--radius-sm); padding: 0 .08em; margin-right: .02em; }