/* Elenq — токены дизайн-системы как переменные CSS. Собрано из tokens.json (артефакт https://claude.ai/artifact/2gLY8NDKTaBYXUsCMy82qa, версия 1793008663-e195, 26.10.2026).
   Подключать раньше components/bundle.css. Тёмная тема — атрибут data-theme="dark" на <html>.
   Длительности и кривые движения (--dur-*, --ease-*) — в начале bundle.css. Шрифты — Google Fonts, ссылка ниже. */
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@400..700&family=Golos+Text:wght@400..600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --paper: #ffffff;
  --surface: #f3f4f5;
  --surface-strong: #e8ebee;
  --state-hover: #1113150f;
  --state-press: #1113151a;
  --line: #e3e6e9;
  --line-2: #d3d7dc;
  --line-control: #868c95;
  --ink: #111315;
  --ink-2: #383d44;
  --ink-3: #5b6068;
  --ink-4: #8a9099;
  --on-ink: #ffffff;
  --bad: #b42318;
  --bad-soft: #fdedeb;
  --bad-mark: #f9d6d1;
  --on-bad: #ffffff;
  --warn: #b54708;
  --warn-soft: #fdf1e4;
  --warn-mark: #fbddbf;
  --on-warn: #ffffff;
  --good: #227959;
  --good-soft: #F0F9F5;
  --on-good: #ffffff;
  --gap: var(--ink-3);
  --gap-soft: #edeff2;
  --info: #2f5bd3;
  --info-soft: #ebf0fc;
  --focus: #111315;
  --link: var(--ink);
  --brand: #1B5E45;
  --brand-50: #F0F9F5;
  --brand-100: #E1F2E9;
  --brand-200: #C2E4D3;
  --brand-300: #97D0B5;
  --brand-600: #227959;
  --brand-700: #1B5E45;
  --brand-800: #0E4A35;
  --brand-900: #093424;
  --brand-950: #051F15;
  --night: #051F15;
  --on-night: #FFFFFF;
  --night-dim: #738F84;
  --night-accent: #97D0B5;
  --scrim: #11131566;
  --data-1: #2f5bd3;
  --data-2: #0f7f81;
  --data-3: #7a4fcc;
  --data-4: #8a6400;
  --data-5: #b3245f;
  --data-6: var(--ink-3);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --touch: 44px;
  --topbar: 64px;
  --side: 232px;
  --side-rail: 52px;
  --bar: 52px;
  --page-max: 1240px;
  --form-max: 820px;
  --read-max: 720px;
  --aside: 340px;
  --gutter: 32px;
  --gutter-phone: 16px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --bp-phone: 600px;
  --bp-tablet: 900px;
  --bp-desktop: 1280px;
  --z-topbar: 20;
  --z-sticky: 10;
  --z-menu: 30;
  --z-dialog: 40;
  --z-toast: 50;
  --shadow-pop: 0 8px 24px rgba(17,19,21,0.08), 0 1px 2px rgba(17,19,21,0.06);
  --shadow-dialog: 0 24px 64px rgba(17,19,21,0.16), 0 2px 6px rgba(17,19,21,0.06);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #2f5bd3;
  --font-display: Geologica, "Golos Text", system-ui, sans-serif;
  --font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --paper: #121417;
  --surface: #1a1d21;
  --surface-strong: #23272c;
  --state-hover: #edeff214;
  --state-press: #edeff229;
  --line: #2a2f35;
  --line-2: #353b42;
  --line-control: #6e767f;
  --ink: #edeff2;
  --ink-2: #c3c9d0;
  --ink-3: #9ca4ad;
  --ink-4: #6e767f;
  --on-ink: #121417;
  --bad: #ff8a7a;
  --bad-soft: #3b1713;
  --bad-mark: #5a231c;
  --on-bad: #1c0a07;
  --warn: #ffb070;
  --warn-soft: #3a230f;
  --warn-mark: #5a3714;
  --on-warn: #1f1205;
  --good: #97D0B5;
  --good-soft: #0F2E23;
  --on-good: #051F15;
  --gap-soft: #23282e;
  --info: #8aa8ff;
  --info-soft: #18233f;
  --focus: #edeff2;
  --brand: #97D0B5;
  --scrim: #000000a6;
  --data-1: #8aa8ff;
  --data-2: #4fc7c9;
  --data-3: #b79bff;
  --data-4: #e0b04b;
  --data-5: #ff86b4;
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-dialog: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-focus: 0 0 0 2px #121417, 0 0 0 4px #8aa8ff;
  color-scheme: dark;
}

/* стили текста из tokens.json → type: класс .nl-t-<имя> */
.nl-t-display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.03em; }
.nl-t-display-l { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; }
.nl-t-stat { font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.02em; }
.nl-t-h1 { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.015em; }
.nl-t-answer { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.nl-t-h2 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.005em; }
.nl-t-h3 { font-family: var(--font-text); font-size: 18px; line-height: 26px; font-weight: 600; }
.nl-t-lead { font-family: var(--font-text); font-size: 19px; line-height: 30px; font-weight: 400; }
.nl-t-doc { font-family: var(--font-text); font-size: 16px; line-height: 27px; font-weight: 400; }
.nl-t-body { font-family: var(--font-text); font-size: 15px; line-height: 22px; font-weight: 400; }
.nl-t-body-strong { font-family: var(--font-text); font-size: 15px; line-height: 22px; font-weight: 600; }
.nl-t-small { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.nl-t-caption { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; }
.nl-t-micro { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 500; }
.nl-t-mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.nl-t-mono-strong { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 600; }