:root {
  --bg: #f4f7fb;
  --bg-soft: #eef2f8;
  --panel: #ffffff;
  --panel-border: #dde5f0;
  --text: #152033;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;
  --accent: #e63946;
  --accent-soft: #fef2f2;
  --success: #059669;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
  --stream-bg: #e9eef5;
  --stream-border: #d5deea;
  --surface-muted: #f8fafc;
  --metric: #1e40af;
  --mono-bg: #f1f5f9;
  --code-text: #1d4ed8;
  --overlay-video: rgba(255, 255, 255, 0.82);
}

body {
  color: var(--text);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--bg) 240px),
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.06), transparent 32%),
    radial-gradient(circle at 0% 0%, rgba(230, 57, 70, 0.04), transparent 28%),
    var(--bg);
}