:root {
  --bg-page: #060d1a;
  --bg-surface: #0c162a;
  --bg-alt: #101e36;
  --bg-sidebar: #060b16;
  --bg-row-alt: #091020;
  --bg-input: #0a1428;
  --hero-v1-steel-silver: linear-gradient(
    160deg,
    #1a2744 0%,
    #0b1428 45%,
    #060d1a 100%
  );
  --hero-v2-light-silver: linear-gradient(
    135deg,
    #a0bcd8 0%,
    #1e3560 45%,
    #060d1a 100%
  );
  --hero-v3-gray-silver: linear-gradient(
    135deg,
    #060d1a 0%,
    #1a2e58 40%,
    #6a7a98 65%,
    #b8bcc8 100%
  );
  --hero-gradient: var(--hero-v3-gray-silver);
  --primary: #3d6ef5;
  --primary-light: #5d84f7;
  --primary-hover: #5a84f7;
  --btn-primary-bg: #3466e8;
  --accent-dim: rgba(61, 110, 245, 0.4);
  --text-primary: #f0f4ff;
  --text-secondary: #ccd8f0;
  --text-muted: #7d8faa;
  --text-active: #5d84f7;
  --border: #1a2a45;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-input: rgba(255, 255, 255, 0.15);
  --border-focus: rgba(61, 110, 245, 0.8);
  --status-green: #34d399;
  --status-amber: #fbbf24;
  --status-red: #ef4444;
  --status-blue: #5d84f7;
  --badge-bg: rgba(61, 110, 245, 0.12);
  --badge-border: rgba(61, 110, 245, 0.35);
  --sidebar-hl: rgba(61, 110, 245, 0.15);
  --nav-bg-scroll: rgba(6, 13, 26, 0.95);
  --nav-border: #1a2a45;
  --nav-active-line: #c3d1e8;
  --bg-panel: #060d1a;
  --bg-kpi: #0c162a;
  --card-bg: rgba(15, 30, 56, 0.7);
  --font-ui: "DM Sans", sans-serif;
  --font-data: "JetBrains Mono", monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}
html.light {
  --bg-page: #f2f5fc;
  --bg-surface: #ffffff;
  --bg-alt: #e8edf8;
  --bg-sidebar: #f0f2f7;
  --bg-row-alt: #f8faff;
  --bg-input: #ffffff;
  --hero-v1-steel-silver: linear-gradient(
    160deg,
    #dde4f5 0%,
    #eaeff9 45%,
    #f2f5fc 100%
  );
  --hero-v2-light-silver: linear-gradient(
    135deg,
    #dce8f5 0%,
    #b8cee8 40%,
    #6080a8 100%
  );
  --hero-v3-gray-silver: linear-gradient(
    135deg,
    #f8f9fd 0%,
    #eaecf5 40%,
    #c8d4f0 65%,
    #a0b8ec 100%
  );
  --hero-gradient: var(--hero-v3-gray-silver);
  --bg-panel: #f0f2f7;
  --bg-kpi: #eef2f7;
  --primary: #3d6ef5;
  --primary-light: #3d6ef5;
  --primary-hover: #2d5ee0;
  --btn-primary-bg: #3466e8;
  --accent-dim: rgba(61, 110, 245, 0.15);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #9ba8b8;
  --text-active: #3d6ef5;
  --border: #dbe2ea;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-card: #dbe2ea;
  --border-input: #cbd5e1;
  --border-focus: rgba(61, 110, 245, 0.6);
  --nav-bg-scroll: rgba(235, 241, 255, 0.97);
  --nav-border: rgba(61, 110, 245, 0.18);
  --nav-active-line: #3d6ef5;
  --card-bg: #ffffff;
}
:root {
  --accent-blue: #3d6ef5;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-violet: #8b5cf6;
  --accent-cyan: #06b6d4;
}