:root {
  --db-font-sans: Inter, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --db-navy-1000: #030b16;
  --db-navy-950: #061426;
  --db-navy-900: #081c31;
  --db-navy-850: #0a243d;
  --db-navy-800: #0d2f4f;
  --db-navy-700: #124367;
  --db-blue-500: #2f8cff;
  --db-blue-400: #56a7ff;
  --db-cyan-500: #21c7ba;
  --db-cyan-300: #75e3dc;
  --db-green-500: #30c48d;
  --db-amber-500: #f2b84b;
  --db-red-500: #f5656a;
  --db-red-400: #ff8589;
  --db-white: #ffffff;
  --db-ink: #132438;
  --db-muted: #6e8198;
  --db-radius-xs: 8px;
  --db-radius-sm: 12px;
  --db-radius-md: 18px;
  --db-radius-lg: 24px;
  --db-shadow-1: 0 10px 28px rgba(5, 20, 38, .08);
  --db-shadow-2: 0 22px 70px rgba(2, 12, 26, .18);
  --db-duration-fast: 180ms;
  --db-duration-drawer: 280ms;
  --db-ease: cubic-bezier(.2, .8, .2, 1);
  --sidebar-size: 272px;
  --topbar-size: 72px;
  --content-max: 1600px;
  --page-pad: clamp(16px, 2.25vw, 32px);
  --surface-app: #f3f6fa;
  --surface-raised: #ffffff;
  --surface-soft: #eef3f8;
  --surface-strong: #e5edf5;
  --surface-glass: rgba(255, 255, 255, .86);
  --text-main: #14263a;
  --text-soft: #667b91;
  --text-faint: #8c9bae;
  --line: #dce6ef;
  --line-strong: #c8d7e5;
  --focus: #2f8cff;
  --sidebar-bg: #061426;
  --sidebar-bg-soft: #0a2139;
  --sidebar-text: #d9e7f5;
  --sidebar-muted: #819ab3;
  --sidebar-line: rgba(149, 181, 209, .13);
  --hero-wash: radial-gradient(circle at 82% 0%, rgba(47, 140, 255, .12), transparent 28%), radial-gradient(circle at 12% 12%, rgba(33, 199, 186, .07), transparent 24%);
}

html[data-theme="dark"] {
  --surface-app: #071321;
  --surface-raised: #0c1d30;
  --surface-soft: #10253b;
  --surface-strong: #15304a;
  --surface-glass: rgba(12, 29, 48, .9);
  --text-main: #f1f6fb;
  --text-soft: #9fb1c4;
  --text-faint: #71879d;
  --line: rgba(141, 176, 208, .15);
  --line-strong: rgba(141, 176, 208, .25);
  --sidebar-bg: #030c18;
  --sidebar-bg-soft: #07192b;
  --sidebar-line: rgba(149, 181, 209, .1);
  --db-shadow-1: 0 14px 36px rgba(0, 0, 0, .2);
  --db-shadow-2: 0 28px 90px rgba(0, 0, 0, .42);
  --hero-wash: radial-gradient(circle at 82% 0%, rgba(47, 140, 255, .15), transparent 30%), radial-gradient(circle at 12% 12%, rgba(33, 199, 186, .09), transparent 24%);
}

@media (max-width: 1199px) {
  :root { --sidebar-size: 76px; --page-pad: 24px; }
}

@media (max-width: 767px) {
  :root { --sidebar-size: 0px; --topbar-size: 60px; --page-pad: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --db-duration-fast: 0ms; --db-duration-drawer: 0ms; }
}