/* Токены Quest House — строго из design/direction.md. Копия в site/tokens.css. */
:root {
  /* Цвет: интерфейс — ночь и тёплый белый; цвет только светом комнат */
  --surface: #0A0A0B;            /* ночь */
  --plane: #141316;              /* плоскость, панель следующей комнаты */
  --ink: #EDE8E1;                /* текст — тёплый белый */
  --ink-muted: #9C968E;          /* метки, подписи; 6.8:1 на ночи */
  --line: rgb(237 232 225 / .14);/* линия 1px */
  --accent: #F3ECE0;             /* главная кнопка, фокус */
  --on-accent: #0A0A0B;
  --danger: #E3261A;

  /* Свет комнат — только щель, ореол, лужа, заливка фото */
  --light-red: #E3261A;
  --light-amber: #F0A040;
  --light-teal: #23B5B0;
  --light-emerald: #33E07A;
  --light-blue: #3A78D0;

  /* Сигнатура «щель света» */
  --signature-color: var(--ink);   /* вне комнаты — тёплый белый; в комнате переопределяется ниже */
  --signature-width: 3px;
  --signature-glow: 24px;

  /* Типографика: дидона / гротеск / моно */
  --font-display: 'Oranienbaum', 'Times New Roman', serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --font-utility: 'JetBrains Mono', ui-monospace, monospace;
  --track-display: -0.02em;
  --track-utility: 0.12em;
  /* Шкала 1.5 от 17px; display падает в 2.5–3× на телефоне */
  --step--2: 11px;
  --step--1: 14px;
  --step-0: 17px;
  --step-1: clamp(20px, 1.75vw, 25px);
  --step-2: clamp(28px, 2.65vw, 38px);
  --step-3: clamp(38px, 4vw, 57px);
  --step-4: clamp(46px, 6vw, 86px);
  --step-5: clamp(50px, 8.9vw, 128px);
  --step-6: clamp(52px, 11.2vw, 168px);

  /* Пространство: шаг 8 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px;
  --gutter: 48px;
  --container: 1344px;
  --header-h: 88px;

  /* Форма: прямоугольник 0, круг — только круглым вещам */
  --radius-control: 0;
  --radius-round: 50%;

  /* Движение: лампа загорается, дверь открывается */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 240ms;
  --dur-reveal: 700ms;
  --dur-door: 1200ms;
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --header-h: 72px; }
}
@media (max-width: 380px) {
  :root { --gutter: 20px; }
}

/* Свет комнаты: переменная задаётся на элементе, иначе наследуется уже вычисленное значение */
[data-light="red"]     { --light: var(--light-red);     --signature-color: var(--light-red); }
[data-light="amber"]   { --light: var(--light-amber);   --signature-color: var(--light-amber); }
[data-light="teal"]    { --light: var(--light-teal);    --signature-color: var(--light-teal); }
[data-light="emerald"] { --light: var(--light-emerald); --signature-color: var(--light-emerald); }
[data-light="blue"]    { --light: var(--light-blue);    --signature-color: var(--light-blue); }