:root,
[data-theme="dark"] {
  --app-sidebar-width: 280px;
  --app-sidebar-collapsed: 76px;
  --app-topbar-height: 72px;
  --app-surface-border: rgba(255, 255, 255, 0.16);
  --app-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

[data-theme="light"] {
  --app-surface-border: rgba(15, 23, 42, 0.08);
  --app-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

body {
  background: var(--ds-bg);
  color: var(--ds-text);
}

.app-main {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ds-bg) 94%, #0b1220 6%), var(--ds-bg));
}

[data-theme="light"] .app-main {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ds-bg) 220px, var(--ds-bg) 100%);
}