:root {
  color-scheme: light;

  /* Подложка и поверхности: холодная бумага рабочего стола */
  --paper: #EFF1F2;
  --surface: #FAFBFB;
  --surface-sunken: #E6E9EA;

  /* Чернила */
  --ink: #191D20;
  --ink-soft: #5B6569;

  /* Разметка */
  --hairline: #D3D9DB;
  --hairline-strong: #B8C0C4;

  /* Акцент: ультрамарин */
  --accent: #2647D6;
  --accent-tint: #E5E9FA;

  /* Резерв: только индикация записи */
  --rec: #C2402A;

  /* Формы. Правило: 0 у структурных блоков, 4px у меток, 10px у элементов управления.
     Пилюля и круг допустимы только там, где форма функциональна: переключатель, запись,
     воспроизведение, ввод промокода. */
  --radius-block: 0;
  --radius-mark: 4px;
  --radius-control: 10px;
  --radius-round: 999px;

  /* Цвет текста на «чернильных» и акцентных заливках: в тёмной теме
     меняется на тёмный, иначе белое на белом */
  --on-ink: #FFFFFF;
  --on-accent: #FFFFFF;

  /* Заливка кнопки по мере готовности: светлая на тёмной кнопке.
     В тёмной теме кнопка сама светлая, поэтому там тон тёмный */
  --progress-tint: rgba(255, 255, 255, .26);

  /* Затемнение под диалогом */
  --scrim: rgba(25, 29, 32, .38);

  /* Шрифты. Archivo не подошёл: в нём нет кириллицы, русский текст уходил в системный.
     IBM Plex держит и то и другое и задаёт студийный характер: одна суперсемья, санс плюс моно. */
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Шаг сетки */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;

  /* Движение. Только как отклик на изменение состояния: короткое и спокойное,
     без декоративных появлений. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
}

/* Тёмная тема: тот же студийный характер, но вечерний пульт вместо бумаги.
   Меняются только значения токенов — ни один компонент править не нужно. */
[data-theme='dark'] {
  color-scheme: dark;

  --paper: #14181C;
  --surface: #1B2027;
  --surface-sunken: #101317;

  --ink: #E7EBED;
  --ink-soft: #99A4AB;

  --hairline: #2B323A;
  --hairline-strong: #3B444D;

  /* Ультрамарин в тёмной теме светлее: исходный на тёмном фоне нечитаем */
  --accent: #7C97FF;
  --accent-tint: #1E2740;

  --rec: #FF6B4A;

  --on-ink: #14181C;
  --on-accent: #101317;
  --progress-tint: rgba(16, 19, 23, .16);
  --scrim: rgba(6, 8, 11, .64);
}