/* Токены мини-аппа. Имена и роли — общий каркас Work/Дизайн-система.md, значения — облик «Кузницы сценариев»:
   цвета взяты с картинки зала (тёмный уголь, янтарь огня, кость, красное знамя на кнопках).
   Почему так — docs/decisions.md, «Облик». Цвета только здесь: компоненты и страница берут их
   именами, сторож — tests/test_design.py. Тема одна: шапку Telegram красим в наш фон. */
:root{
  --font-sys: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body: 'Onest',var(--font-sys);
  --font-display: 'Cormorant Garamond',Georgia,serif;

  --bg: #120c08;
  --fg: #f6f0e6;
  --card: #1e1510;
  --raised: #2b1e15;
  --accent: #a8141a;
  --accent-fg: #ffffff;
  --accent-text: #ffb347;
  --muted: #2b1e15;
  --muted-fg: #cfc4b6;
  --border: rgba(246,240,230,.14);
  --input: rgba(246,240,230,.34);
  --field: #1e1510;
  --destructive: #a81d3a;
  --destructive-fg: #ffffff;
  --destructive-text: #ff8fa3;
  --ok: #8fd19e;
  --warn: #e9c46a;
  --warn-bg: #2b2208;
  --hover: rgba(246,240,230,.08);
  --scrim: rgba(0,0,0,.72);
  --shadow: none;
  --shadow-lg: 0 16px 48px rgba(0,0,0,.7);
  --shadow-title: 0 2px 14px rgba(0,0,0,.75);
  --focus: #ffb347;

  /* Затемнение картинки. Кирилл: цвета родные, 10–20% поверх. Под текстом большого экрана темнее, иначе он теряется на знамени */
  --art-shade: rgba(0,0,0,.15);
  --art-shade-text: rgba(0,0,0,.62);

  color-scheme: dark;
}

/* Шкалы. Шкала — меню: на экране обычно 3–4 размера. Текст крупнее обычного: «мелко, плохо
   читается» — главное замечание Анастасии. */
:root{
  --text-xs: 13px;      /* бейджи, подписи */
  --text-sm: 14px;      /* подсказки, таблицы */
  --text-base: 16px;    /* основной текст */
  --text-md: 18px;      /* подводка, шаги */
  --text-lg: 24px;      /* подпись поля, заголовок карточки */
  --text-xl: 32px;      /* заголовок вкладки, «из 3» */
  --text-title: clamp(34px, 10.7vw, 44px);  /* заголовок кабинета в одну строку */
  --text-2xl: clamp(48px, 16.5vw, 72px);   /* заголовок большого экрана */
  --text-display: clamp(68px, min(27vw, 12.5vh), 128px); /* цифра заготовок: на низком экране меньше, кабинет без прокрутки */
  --text-touch: 16px;   /* поля ввода: мельче — iPhone приближает страницу */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 700;

  --leading-none: 1;
  --leading-display: 1;     /* 1.1 Кирилл читал как полуторный: Эксперты/Альтаир, CLAUDE.md */
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  --tracking-tight: -.01em; /* антиква крупно: чуть плотнее */
  --tracking-wide: .08em;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --control-sm: 40px;
  --control-md: 52px;
  --control-lg: 60px;
  --node: 34px;

  --icon-sm: 16px;
  --icon-base: 20px;

  --page-max: 560px;
  --dialog-sm: 340px;
  /* Полоса картинки в кабинете: откуда начинается заголовок и докуда видна картинка */
  --strip-offset: clamp(84px, 21vh, 176px);
  --strip-offset-compact: clamp(64px, 12vh, 104px);
  --strip-under: 60px;
  --title-at: calc(env(safe-area-inset-top) + var(--strip-offset));
  --title-at-compact: calc(env(safe-area-inset-top) + var(--strip-offset-compact));

  --dur-fast: 140ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
}