/* Токены дизайн-системы. Палитра, типошкала, шаг сетки и радиусы —
   единственное место, где заданы значения: остальные файлы только ссылаются. */

:root {
  /* Цвет. Войд — не фон, а материал: на нём всё держится, поэтому
     насыщенный остаётся ровно один и только под заливку кнопки. */
  --void: #000000;
  --bone: #ffffff;
  --ash: #9a9a9a;
  --mist: #bdbdbd;
  --iris: #8052ff;
  --saffron: #ffb829;
  --verdant: #15846e;

  --iris-rgb: 128, 82, 255;
  --saffron-rgb: 255, 184, 41;
  --verdant-rgb: 21, 132, 110;

  /* Треки различаются акцентом внутри той же палитры: заливкой остаётся
     только ирис, трековый цвет живёт в тексте, точках и линиях. */
  --accent: var(--iris);
  --accent-rgb: var(--iris-rgb);

  /* Тонкие линии рабочего регистра. В маркетинговом их нет вообще. */
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.18);

  /* Статусы домашней работы. */
  --ok: var(--verdant);
  --warn: var(--saffron);

  /* Шрифт. Один гротеск на весь интерфейс: иерархию держит масштаб,
     а не насыщенность — 400 работает и в 113px, и в 15px. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --w-light: 200;
  --w-regular: 400;
  --w-semi: 600;

  /* Кегли. Дисплейные размеры взяты через clamp: русские заголовки
     длиннее английских, жёсткие 113px рвут композицию на ноутбуке. */
  --text-caption: 12px;
  --text-nav: 14px;
  --text-small: 15px;
  --text-body: 18px;
  --text-h6: 24px;
  --text-h5: 27px;
  --text-h4: clamp(24px, 2.4vw, 36px);
  --text-h3: clamp(28px, 3vw, 42px);
  --text-h2: clamp(32px, 3.6vw, 48px);
  --text-h1: clamp(38px, 5.4vw, 78px);
  --text-display: clamp(46px, 7.4vw, 113px);

  --lh-tight: 1.05;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* Трекинг сжимается вместе с кеглем: −0.04em на дисплейных,
     плюсовой — на капсовых подписях. */
  --tr-display: -0.04em;
  --tr-heading: -0.028em;
  --tr-nav: 0.025em;

  /* Шаг 6px. */
  --s-6: 6px;
  --s-12: 12px;
  --s-18: 18px;
  --s-24: 24px;
  --s-30: 30px;
  --s-36: 36px;
  --s-60: 60px;
  --s-96: 96px;
  --s-120: 120px;

  --radius: 24px;
  --radius-pill: 9999px;

  --page: 1280px;
  --gutter: clamp(20px, 4vw, 60px);
  --measure: 60ch;
  --nav-height: 84px;

  --section-gap: clamp(72px, 9vw, 120px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Трековые темы. Подключаются на элемент через data-track, чтобы
   карточка курса и страница занятия красились из одного источника. */
[data-track="cpp"] {
  --accent: var(--saffron);
  --accent-rgb: var(--saffron-rgb);
}

[data-track="crypto"] {
  --accent: var(--iris);
  --accent-rgb: var(--iris-rgb);
}