/* Токены. Меняете этот файл — меняется весь сайт. */
:root {
  color-scheme: light dark;

  /* Фирменный цвет */
  --brand-100: #ffe5e5;
  --brand-300: #ff8580;
  --brand-500: #ff1f1c;
  --brand-600: #e61815;
  --brand-700: #c71411;

  /* Текст и фон */
  --fg:        #1a202c;
  --fg-muted:  #4a5568;
  --fg-subtle: #718096;
  --bg:        #ffffff;
  --bg-muted:  #f7fafc;
  --bg-subtle: #edf2f7;
  --border:    #e2e8f0;
  --accent:        var(--brand-500);
  --accent-strong: var(--brand-700);
  --on-accent:     #ffffff;

  /* Шрифт */
  --font-body: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Шкала размеров */
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.5625rem;
  --step-3:  1.9375rem;
  --step-4:  2.4375rem;

  /* Ритм */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --space-5: 4rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* Ширина колонки текста: длинная строка читается тяжело */
  --measure: 38rem;
}

/* Тёмная схема. Два блока намеренно: системная настройка и явный выбор
   через data-theme. Если описать только один, второй способ перестанет
   работать, и заметит это не автор, а читатель. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg:        #f7fafc;
    --fg-muted:  #cbd5e0;
    --fg-subtle: #a0aec0;
    --bg:        #14181f;
    --bg-muted:  #1a202c;
    --bg-subtle: #2d3748;
    --border:    #2d3748;
    --accent:        var(--brand-300);
    --accent-strong: var(--brand-500);
    --on-accent:     #14181f;
  }
}

:root[data-theme="dark"] {
  --fg:        #f7fafc;
  --fg-muted:  #cbd5e0;
  --fg-subtle: #a0aec0;
  --bg:        #14181f;
  --bg-muted:  #1a202c;
  --bg-subtle: #2d3748;
  --border:    #2d3748;
  --accent:        var(--brand-300);
  --accent-strong: var(--brand-500);
  --on-accent:     #14181f;
}