:root {
  color-scheme: light;
  --font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --fs-xxs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: clamp(26px, 3.5vw, 44px);
  --lh-tight: 1.12;
  --lh-base: 1.48;
  --lh-relaxed: 1.72;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 760;
  --bg: #eef3fb;
  --bg-rgb: 238, 243, 251;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-soft: rgba(248, 250, 252, 0.92);
  --surface-strong: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --text: #111827;
  --text-strong: #07111f;
  --muted: #667085;
  --subtle: #8a94a6;
  --line: rgba(15, 23, 42, 0.1);
  --line-strong: rgba(15, 23, 42, 0.16);
  --accent: #2563eb;
  --accent-soft: #e8f0ff;
  --accent-strong: #174ea6;
  --success: #12b981;
  --success-soft: #dcfce7;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --violet: #7c3aed;
  --cyan: #0891b2;
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 18px 52px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 24px 70px rgba(37, 99, 235, 0.18);
  --sidebar-width: 292px;
  --sidebar-collapsed-width: 88px;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 30px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  font-family: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #07111f;
    --bg-rgb: 7, 17, 31;
    --surface: rgba(15, 23, 42, 0.84);
    --surface-soft: rgba(17, 24, 39, 0.9);
    --surface-strong: #111827;
    --surface-glass: rgba(15, 23, 42, 0.68);
    --text: #e5eefc;
    --text-strong: #f8fbff;
    --muted: #a8b3c7;
    --subtle: #75839a;
    --line: rgba(226, 232, 240, 0.11);
    --line-strong: rgba(226, 232, 240, 0.18);
    --accent: #60a5fa;
    --accent-soft: rgba(37, 99, 235, 0.22);
    --accent-strong: #bfdbfe;
    --success-soft: rgba(18, 185, 129, 0.18);
    --warning-soft: rgba(245, 158, 11, 0.18);
    --danger-soft: rgba(239, 68, 68, 0.2);
    --shadow-sm: 0 14px 34px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.36);
    --shadow-glow: 0 28px 80px rgba(96, 165, 250, 0.2);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --bg-rgb: 7, 17, 31;
  --surface: rgba(15, 23, 42, 0.84);
  --surface-soft: rgba(17, 24, 39, 0.9);
  --surface-strong: #111827;
  --surface-glass: rgba(15, 23, 42, 0.68);
  --text: #e5eefc;
  --text-strong: #f8fbff;
  --muted: #a8b3c7;
  --subtle: #75839a;
  --line: rgba(226, 232, 240, 0.11);
  --line-strong: rgba(226, 232, 240, 0.18);
  --accent: #60a5fa;
  --accent-soft: rgba(37, 99, 235, 0.22);
  --accent-strong: #bfdbfe;
  --success-soft: rgba(18, 185, 129, 0.18);
  --warning-soft: rgba(245, 158, 11, 0.18);
  --danger-soft: rgba(239, 68, 68, 0.2);
  --shadow-sm: 0 14px 34px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 28px 80px rgba(96, 165, 250, 0.2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text);
  background:
    radial-gradient(circle at 14% 8%, rgba(37, 99, 235, 0.18), transparent 32rem),
    radial-gradient(circle at 82% 2%, rgba(124, 58, 237, 0.12), transparent 26rem),
    var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select {
  outline-color: var(--accent);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

p {
  color: var(--muted);
}