:root {
  color-scheme: light;

  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #f1f5f9;
  --bg-inset: #e9eef6;

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;

  --border: #dbe3ee;
  --border-strong: #b6c2d6;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-active: #1e40af;
  --on-accent: #ffffff;
  --accent-soft: rgba(37, 99, 235, 0.1);

  --success: #15803d;
  --success-soft: rgba(21, 128, 61, 0.12);
  --warning: #b45309;
  --warning-soft: rgba(180, 83, 9, 0.12);
  --danger: #b91c1c;
  --danger-soft: rgba(185, 28, 28, 0.1);
  --info: var(--accent);
  --info-soft: var(--accent-soft);

  --shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --focus-ring: rgba(37, 99, 235, 0.45);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;

  --shell-sidebar-width: 16rem;
  --shell-header-height: 3.5rem;
  --shell-tabbar-height: 4.25rem;
  --content-max: 76rem;
  --content-max-wide: 96rem;

  --transition-fast: 140ms ease;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #0f172a;
  --bg-surface: #111827;
  --bg-elevated: #172033;
  --bg-inset: #0c1424;

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #64748b;

  --border: #2c3b52;
  --border-strong: #475569;

  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-active: #bfdbfe;
  --on-accent: #0b1220;
  --accent-soft: rgba(96, 165, 250, 0.14);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.16);

  --shadow: 0 14px 35px rgba(2, 6, 23, 0.45);
  --shadow-soft: 0 6px 18px rgba(2, 6, 23, 0.35);

  --focus-ring: rgba(96, 165, 250, 0.6);
}

@media (min-width: 120rem) {
  :root,
  html[data-theme="dark"] {
    --content-max: 90rem;
    --content-max-wide: 108rem;
  }
}