/* tokens.css — токены дизайна (design-handoff/design/tokens/tokens.css, значения один в один): кабинет светлый,
   панель оператора тёмная (data-theme="dark"). Шрифты — свои, со своего сервера (OFL, /fonts): сторонних хостов у
   портала нет (CSP font-src 'self'). Править значения — в design-handoff и копировать сюда. */
@font-face { font-family: "Onest"; src: url("../fonts/Onest-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded-Variable.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

:root {
  --c-bg: #F3F2EA;
  --c-surface: #FFFFFF;
  --c-surface-2: #E9E8DE;
  --c-line: #DDDCD0;
  --c-text: #151712;
  --c-muted: #5B6053;
  --c-accent: #C8F560;
  --c-on-accent: #151712;
  --c-accent-text: #3F6B00;
  --c-warn: #FBE7C2;
  --c-on-warn: #6B4300;
  --c-danger: #B3412A;
  --c-on-danger: #FFFFFF;
  --c-focus: #151712;
  --c-ink: #151712;
  --c-on-ink: #F3F2EA;
  --c-accent-hover: #BEE95B;
  --c-accent-pressed: #B4DC56;
  --c-surface-hover: #F2F2F2;
  --c-surface-pressed: #E6E6E6;
  --c-danger-hover: #AA3E28;
  --c-danger-pressed: #A13A26;
  --c-ink-hover: #31332E;
  --font-display: "Unbounded", "Segoe UI", sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-hero: 56px; --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 26px; --fs-num: 32px;
  --fs-body-l: 17px; --fs-body: 15px; --fs-body-s: 14px; --fs-caption: 12px; --fs-mono: 13px; --fs-eyebrow: 11px;
  --r-s: 10px; --r-m: 12px; --r-control: 14px; --r-card: 22px; --r-hero: 28px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --h-control: 52px; --h-control-s: 44px;
  --hover: rgba(21,23,18,.05); --pressed: rgba(21,23,18,.10);
  color-scheme: light;
}
[data-theme="dark"] {
  --c-bg: #0F100D;
  --c-surface: #181A15;
  --c-surface-2: #20231C;
  --c-line: #2C3027;
  --c-text: #EDEEE6;
  --c-muted: #9A9E90;
  --c-accent: #C8F560;
  --c-on-accent: #12140C;
  --c-accent-text: #C8F560;
  --c-warn: #F5B94A;
  --c-on-warn: #1A1406;
  --c-danger: #FF8266;
  --c-on-danger: #230B05;
  --c-focus: #C8F560;
  --c-accent-hover: #CCF66B;
  --c-accent-pressed: #A4C94F;
  --c-surface-hover: #282A25;
  --c-surface-pressed: #141511;
  --c-danger-hover: #FF8B71;
  --c-danger-pressed: #D16B54;
  --hover: rgba(255,255,255,.07); --pressed: rgba(0,0,0,.18);
  color-scheme: dark;
}

body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; text-wrap: balance; }
.num { font-family: var(--font-display); font-weight: 500; line-height: 1; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.muted { color: var(--c-muted); }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); }

/* Кнопки: одна механика состояний для всех вариантов */
.btn { height: var(--h-control); padding: 0 22px; border-radius: var(--r-control); border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 var(--fs-body)/1 var(--font-body);
  text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, transform .1s ease; }
.btn:hover:not(:disabled) { box-shadow: inset 0 0 0 999px var(--hover); }
.btn:active:not(:disabled) { transform: scale(.98); box-shadow: inset 0 0 0 999px var(--pressed); }
.btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn--ink       { background: var(--c-ink, var(--c-text)); color: var(--c-on-ink, var(--c-bg)); }
.btn--accent    { background: var(--c-accent); color: var(--c-on-accent); }
.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-line); font-weight: 500; }
.btn--ghost     { background: transparent; color: var(--c-muted); height: var(--h-control-s); padding: 0 8px; font-weight: 400; font-size: 13px; }
.btn--danger    { background: var(--c-danger); color: var(--c-on-danger); }
.btn--s         { height: var(--h-control-s); border-radius: var(--r-m); font-size: var(--fs-body-s); padding: 0 16px; }

.field { height: var(--h-control); box-sizing: border-box; padding: 0 16px; border-radius: var(--r-control);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text); font: inherit; }
.field:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }

.pill { height: 28px; padding: 0 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; }
.pill--ok   { background: var(--c-accent); color: var(--c-on-accent); }
.pill--warn { background: var(--c-warn); color: var(--c-on-warn); }
.pill--off  { background: var(--c-surface-2); color: var(--c-muted); }

/* Полоска остатка: сегменты = остаток, не расход */
.meter { display: flex; gap: 3px; }
.meter > i { flex: 1; height: 8px; border-radius: 2px; background: var(--c-surface-2); }
.meter > i.on { background: var(--c-text); }
[data-theme="dark"] .meter > i.on { background: var(--c-accent); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }