/* tokens.css — переменные дизайн-системы (цвета, шрифты, отступы, радиусы, тайминги).
   Источник значений — docs/DESIGN.md. Менять цвета/шрифты/размеры — только здесь. */

:root {
  /* Цвета — палитра из DESIGN.md, раздел 2 */
  --color-paper: #FCFAF6;       /* фон "бумага" */
  --color-ink: #2A2420;         /* чернила, весь текст */
  --color-yellow: #E9D586;      /* главные кнопки и плашки, текст на нём только --color-ink */
  --color-coral: #F0CEC4;       /* плашки "мало мест", декоративные блоки, текст только --color-ink (было розовым — заменено 2026-09-27) */
  --color-blue: #3D6C99;        /* мягкий синий. Бейджи "осталось мест", ссылки, акценты чата. Текст на нём — только светлый (--color-paper) (было зелёным Pantone 18-6031 TCX — заменено 2026-09-27) */
  --color-blue-tint: rgba(61, 108, 153, 0.12); /* полупрозрачный синий поверх бумаги. Фон чата и карточек, текст --color-ink (было светло-зелёным — заменено 2026-09-27) */
  --color-line: color-mix(in srgb, var(--color-ink) 12%, var(--color-paper)); /* тонкие разделители, границы */

  /* Шрифты — self-hosted, файлы в assets/fonts/ (подключены через @font-face в base.css) */
  --font-heading: "Comfortaa", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;

  /* Шкала размеров текста (мобильный, через clamp) — DESIGN.md, раздел 3 */
  --text-h1: clamp(1.75rem, 7vw, 2.5rem);      /* 28–40px */
  --text-h2: clamp(1.375rem, 5.5vw, 1.75rem);  /* 22–28px */
  --text-h3: clamp(1.125rem, 4.5vw, 1.375rem); /* 18–22px */
  --text-body: clamp(1rem, 3.5vw, 1.0625rem);  /* 16–17px, минимум 16px против зума iOS в полях */
  --text-small: 0.875rem;                      /* 14px */

  /* Отступы (шкала 4px) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* Радиусы скруглений */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Тайминги и кривые анимаций */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Контейнеры */
  --container-max: 1180px;   /* общий контент */
  --hero-max: 720px;         /* зона hero на десктопе, см. CLAUDE.md */

  /* Высота липкой верхней панели (.topbar) — с запасом (реально ~77–78px на всех
     ширинах, зависит от --tap-target-min кнопки). Используется для scroll-margin-top
     у секций, чтобы переход по якорю не прятал заголовок раздела под панелью. */
  --topbar-height: 88px;

  /* Тап-цели / поля */
  --tap-target-min: 48px;
}