/* Дизайн-токены. Система — редакторская (Cursor-inspired), перенесена
   с npdoc.ru: тёплый кремовый холст, белые поверхности, волосяные границы
   вместо теней, единственный оранжевый акцент только на первичных CTA.

   ЕДИНСТВЕННОЕ место в проекте, где допустимы hex-значения цвета.
   Во всех остальных файлах — только var(--...). Проверяется автотестами. */

:root {
  /* ── Поверхности ─────────────────────────────────────────────────── */
  --canvas: #F7F7F4;
  --canvas-soft: #FAFAF7;
  --surface: #FFFFFF;
  --surface-strong: #E6E5E0;

  /* ── Волосяные границы: механика глубины вместо теней ────────────── */
  --hairline: #E6E5E0;
  --hairline-soft: #EFEEE8;
  --hairline-strong: #CFCDC4;

  /* ── Текст ───────────────────────────────────────────────────────── */
  --ink: #26251E;
  --body: #5A5852;
  --muted: #6A675D;
  --muted-soft: #A09C92;

  /* ── Акцент: только первичные CTA ────────────────────────────────── */
  --primary: #C24000;
  --primary-active: #A33800;
  --on-primary: #FFFFFF;

  /* ── Статусы ─────────────────────────────────────────────────────── */
  --success: #15734F;
  --success-bg: #EDF7F3;
  --error: #CF2D56;
  --error-bg: #FCF0F3;

  /* ── Затемнение под полноэкранным просмотром образца ─────────────── */
  --overlay: rgba(38, 37, 30, .84);

  /* ── Радиусы ─────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* ── Отступы, база 4px ───────────────────────────────────────────── */
  --s-xxs: 2px;  --s-xs: 4px;   --s-sm: 8px;   --s-md: 12px;
  --s-lg: 16px;  --s-xl: 24px;  --s-2xl: 32px; --s-3xl: 48px;
  --s-4xl: 64px; --s-5xl: 96px;

  /* ── Шрифты ──────────────────────────────────────────────────────── */
  --font-ui: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ── Размеры компонентов ─────────────────────────────────────────
     Единая сетка для всего, с чем взаимодействует пользователь.
     Поля, списки, календари, кнопки и карточки-варианты обязаны
     совпадать по высоте, боковым отступам и скруглению — иначе на
     одном экране они выглядят как элементы разных сайтов. */
  --control-h: 46px;        /* поля, списки, кнопки: единая высота */
  --control-h-sm: 38px;     /* компактные: шапка, плашка cookie */
  --control-h-lg: 54px;     /* крупные призывы к действию */
  --control-px: 16px;       /* боковой внутренний отступ контрола */
  --control-py: 12px;       /* вертикальный отступ там, где высота свободная */
  --control-r: var(--r-md); /* скругление контролов: 8px */

  --card-p: var(--s-xl);    /* стандартная карточка: 24px */
  --card-p-sm: var(--s-lg); /* плотная карточка в списке: 16px */
  --card-r: var(--r-lg);    /* скругление карточек: 12px */
  --panel-r: var(--r-xl);   /* крупные панели: 16px */

  /* ── Раскладка ───────────────────────────────────────────────────── */
  --container: 1120px;
  --container-narrow: 720px;
}