:root,
html[data-theme="light"] {
  --bg-canvas: #f4f7fb;
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-surface-3: #e8eef8;
  --bg-raised: #f8fafc;
  --bg-elevated: #ffffff;
  --bg-dropdown: #ffffff;
  --bg-overlay: rgba(15, 23, 42, 0.32);
  --bg-topbar: rgba(255, 255, 255, 0.88);
  --bg-topbar-alt: rgba(255, 255, 255, 0.82);

  --border-faint: rgba(15, 23, 42, 0.05);
  --border-subtle: rgba(15, 23, 42, 0.10);
  --border-default: rgba(15, 23, 42, 0.16);
  --border-strong: rgba(15, 23, 42, 0.24);
  --border-focus: rgba(119, 48, 229, 0.28);

  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #000000;
  --text-disabled: #000000;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;
  --text-brand-secondary: #000000;

  --accent: #7730e5;
  --accent-dark: #6120c9;
  --accent-dim: rgba(119, 48, 229, 0.10);
  --accent-border: rgba(119, 48, 229, 0.22);
  --accent-hover: #8e4cf0;
  --accent-muted: rgba(119, 48, 229, 0.16);

  --color-violet: #7c3aed;
  --color-violet-dim: rgba(124, 58, 237, 0.10);
  --color-violet-border: rgba(124, 58, 237, 0.22);

  --color-cyan: #0891b2;
  --color-cyan-dim: rgba(8, 145, 178, 0.10);
  --color-cyan-border: rgba(8, 145, 178, 0.22);

  --color-rose: #e11d48;
  --color-rose-dim: rgba(225, 29, 72, 0.10);
  --color-rose-border: rgba(225, 29, 72, 0.22);

  --color-amber: #d97706;
  --color-amber-dim: rgba(217, 119, 6, 0.10);
  --color-amber-border: rgba(217, 119, 6, 0.22);

  --color-emerald: #059669;
  --color-emerald-dim: rgba(5, 150, 105, 0.10);
  --color-emerald-border: rgba(5, 150, 105, 0.22);

  --color-sky: #0284c7;
  --color-sky-dim: rgba(2, 132, 199, 0.10);
  --color-sky-border: rgba(2, 132, 199, 0.22);

  --color-orange: #ea580c;
  --color-orange-dim: rgba(234, 88, 12, 0.10);
  --color-orange-border: rgba(234, 88, 12, 0.22);

  --color-pink: #db2777;
  --color-pink-dim: rgba(219, 39, 119, 0.10);
  --color-pink-border: rgba(219, 39, 119, 0.22);

  --status-active: #059669;
  --status-active-dim: rgba(5, 150, 105, 0.10);
  --status-active-border: rgba(5, 150, 105, 0.24);

  --status-irregular: #d97706;
  --status-irregular-dim: rgba(217, 119, 6, 0.10);
  --status-irregular-border: rgba(217, 119, 6, 0.24);

  --status-inactive: #dc2626;
  --status-inactive-dim: rgba(220, 38, 38, 0.10);
  --status-inactive-border: rgba(220, 38, 38, 0.22);

  --status-archived: #64748b;
  --status-archived-dim: rgba(100, 116, 139, 0.12);
  --status-archived-border: rgba(100, 116, 139, 0.20);

  --status-trusted: #d97706;
  --status-trusted-dim: rgba(217, 119, 6, 0.10);

  --color-danger: #dc2626;
  --color-danger-dim: rgba(220, 38, 38, 0.10);
  --color-success: #059669;
  --color-success-dim: rgba(5, 150, 105, 0.10);
  --color-warning: #d97706;
  --color-warning-dim: rgba(217, 119, 6, 0.10);
  --color-info: #0284c7;
  --color-info-dim: rgba(2, 132, 199, 0.10);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 40px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 16px 42px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 40px 80px rgba(15, 23, 42, 0.14);
  --shadow-glow-accent: 0 0 24px rgba(119, 48, 229, 0.14);
  --shadow-glow-indigo: 0 0 24px rgba(119, 48, 229, 0.10);

  --scrollbar-thumb: rgba(100, 116, 139, 0.38);
  --scrollbar-thumb-hover: rgba(71, 85, 105, 0.56);

  --t-fast: 110ms ease;
  --t-base: 180ms ease;
  --t-slow: 280ms ease;
  --t-spring: 260ms cubic-bezier(0.22, 1, 0.36, 1);

  --nav-height: 64px;
  --topbar-height: 60px;
  --content-max: 1400px;
  --content-padding: 28px;
}

html[data-theme="dark"] {
  --bg-canvas: #161517;
  --bg-base: #1b1a1f;
  --bg-surface: #1b1a1c;
  --bg-surface-2: #1e1d21;
  --bg-surface-3: #2b2836;
  --bg-raised: #1e1d21;
  --bg-elevated: #312e3e;
  --bg-dropdown: #201f23;
  --bg-overlay: rgba(10, 9, 12, 0.85);
  --bg-topbar: rgba(22, 21, 23, 0.90);
  --bg-topbar-alt: rgba(22, 21, 23, 0.82);

  --border-faint: rgba(255, 255, 255, 0.03);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-focus: rgba(119, 48, 229, 0.55);

  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #dfdede;
  --text-disabled: #52525b;
  --text-inverse: #080808;
  --text-on-accent: #ffffff;
  --text-brand-secondary: #ffffff;

  --accent: #7730e5;
  --accent-dark: #6120c9;
  --accent-dim: rgba(119, 48, 229, 0.12);
  --accent-border: rgba(119, 48, 229, 0.28);
  --accent-hover: #9b5cf0;
  --accent-muted: rgba(119, 48, 229, 0.55);

  --color-violet: #a78bfa;
  --color-violet-dim: rgba(167, 139, 250, 0.12);
  --color-violet-border: rgba(167, 139, 250, 0.25);

  --color-cyan: #22d3ee;
  --color-cyan-dim: rgba(34, 211, 238, 0.10);
  --color-cyan-border: rgba(34, 211, 238, 0.22);

  --color-rose: #fb7185;
  --color-rose-dim: rgba(251, 113, 133, 0.10);
  --color-rose-border: rgba(251, 113, 133, 0.22);

  --color-amber: #fbbf24;
  --color-amber-dim: rgba(251, 191, 36, 0.10);
  --color-amber-border: rgba(251, 191, 36, 0.22);

  --color-emerald: #34d399;
  --color-emerald-dim: rgba(52, 211, 153, 0.10);
  --color-emerald-border: rgba(52, 211, 153, 0.22);

  --color-sky: #38bdf8;
  --color-sky-dim: rgba(56, 189, 248, 0.10);
  --color-sky-border: rgba(56, 189, 248, 0.22);

  --color-orange: #fb923c;
  --color-orange-dim: rgba(251, 146, 60, 0.10);
  --color-orange-border: rgba(251, 146, 60, 0.22);

  --color-pink: #f472b6;
  --color-pink-dim: rgba(244, 114, 182, 0.10);
  --color-pink-border: rgba(244, 114, 182, 0.22);

  --status-active: #34d399;
  --status-active-dim: rgba(52, 211, 153, 0.10);
  --status-active-border: rgba(52, 211, 153, 0.25);

  --status-irregular: #fbbf24;
  --status-irregular-dim: rgba(251, 191, 36, 0.10);
  --status-irregular-border: rgba(251, 191, 36, 0.25);

  --status-inactive: #f87171;
  --status-inactive-dim: rgba(248, 113, 113, 0.10);
  --status-inactive-border: rgba(248, 113, 113, 0.25);

  --status-archived: #52525b;
  --status-archived-dim: rgba(82, 82, 91, 0.14);
  --status-archived-border: rgba(82, 82, 91, 0.25);

  --status-trusted: #fbbf24;
  --status-trusted-dim: rgba(251, 191, 36, 0.10);

  --color-danger: #f87171;
  --color-danger-dim: rgba(248, 113, 113, 0.10);
  --color-success: #34d399;
  --color-success-dim: rgba(52, 211, 153, 0.10);
  --color-warning: #fbbf24;
  --color-warning-dim: rgba(251, 191, 36, 0.10);
  --color-info: #38bdf8;
  --color-info-dim: rgba(56, 189, 248, 0.10);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.7);
  --shadow-glow-accent: 0 0 24px rgba(119, 48, 229, 0.18);
  --shadow-glow-indigo: 0 0 24px rgba(119, 48, 229, 0.12);

  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
}