:root, html[data-theme="dark"] {
  /* ---------- Цвета ---------- */
  --bg: #0f1218;
  --bg-elev: #131824;
  --panel: #171b24;
  --panel-2: #1e2330;
  --panel-hover: #262c3a;
  --border: #262c3a;
  --border-strong: #333a4a;

  --text: #e8ecf3;
  --text-muted: #8a93a6;
  --text-dim: #5f6878;

  --primary: #5b8cff;
  --primary-2: #7c5bff;
  --primary-hover: #6f9bff;

  --danger: #ff5c72;
  --warn: #ffb648;
  --ok: #45d19b;
  --info: #5bc0ff;

  --bg-ok: rgba(69, 209, 155, .12);
  --bg-warn: rgba(255, 182, 72, .12);
  --bg-danger: rgba(255, 92, 114, .12);
  --bg-info: rgba(91, 192, 255, .12);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);
  --shadow: 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .35);

  /* ---------- Типографика ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---------- Отступы ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---------- Радиусы ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Переходы ---------- */
  --t-fast: 100ms;
  --t-base: 150ms;
  --t-slow: 250ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-2: #eef1f7;
  --panel-hover: #e3e8f2;
  --border: #dfe4ee;
  --border-strong: #c8d0e0;

  --text: #1a2233;
  --text-muted: #667085;
  --text-dim: #98a2b3;

  --primary: #3b6bff;
  --primary-2: #6d4bff;
  --primary-hover: #2857f0;

  --danger: #e04356;
  --warn: #c8801a;
  --ok: #17996b;
  --info: #0a84ff;

  --bg-ok: rgba(23, 153, 107, .1);
  --bg-warn: rgba(200, 128, 26, .12);
  --bg-danger: rgba(224, 67, 86, .1);
  --bg-info: rgba(10, 132, 255, .1);

  --shadow-sm: 0 2px 6px rgba(20, 30, 60, .06);
  --shadow: 0 8px 24px rgba(20, 30, 60, .08);
  --shadow-lg: 0 16px 40px rgba(20, 30, 60, .12);

  color-scheme: light;
}

/* Утилитарные классы */
.u-mb-1 { margin-bottom: var(--sp-1); }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }

.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }

.u-row { display: flex; align-items: center; gap: var(--sp-2); }
.u-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.u-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1; }
.u-nowrap { white-space: nowrap; }
.u-center { display: flex; align-items: center; justify-content: center; }
.u-right { text-align: right; }
.u-hidden { display: none !important; }

/* Текст */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.text-bold { font-weight: 700; }
.text-medium { font-weight: 500; }
.text-center { text-align: center; }