:root {
    /* Surfaces - layered depth */
    --surface-bg: rgba(255, 255, 255, 0.03);
    --surface-bg-hover: rgba(255, 255, 255, 0.06);
    --surface-bg-active: rgba(79, 143, 224, 0.08);
    --surface-border: rgba(255, 255, 255, 0.06);
    --surface-border-hover: rgba(255, 255, 255, 0.1);
    --surface-blur: blur(12px);
    --surface-blur-strong: blur(20px);

    /* Background hierarchy */
    --bg-primary: #090A0E;
    --bg-surface: #0F1319;
    --bg-surface-hover: #151A22;
    --bg-card: #0F1319;
    --bg-card-hover: #151A22;
    --bg-input: #090A0E;
    --bg-sidebar: #0B0D10;
    --bg-elevated: rgba(20, 26, 36, 0.85);
    --bg-glass: rgba(15, 19, 25, 0.6);

    /* Glass utility */
    --glass-bg: rgba(15, 19, 25, 0.6);
    --glass-blur: blur(12px);
    --glass-blur-strong: blur(20px);
    --glass-border: rgba(255, 255, 255, 0.04);

    /* Accent palette */
    --accent-primary: #4F8FE0;
    --accent-primary-hover: #6BA3E8;
    --accent-primary-subtle: rgba(79, 143, 224, 0.08);
    --accent-primary-glow: rgba(79, 143, 224, 0.15);

    --accent-gold: #C89B3C;
    --accent-gold-hover: #D4AA4D;
    --accent-gold-subtle: rgba(200, 155, 60, 0.08);

    --accent-violet: #7C5CBF;
    --accent-violet-hover: #9174CF;
    --accent-violet-subtle: rgba(124, 92, 191, 0.08);

    /* Backward-compatible aliases */
    --accent: #4F8FE0;
    --accent-hover: #6BA3E8;
    --accent-subtle: rgba(79, 143, 224, 0.08);
    --accent-glow: rgba(79, 143, 224, 0.15);
    --bg-secondary: #0F1319;

    /* Semantic colors */
    --success: #4FB885;
    --success-bg: rgba(79, 184, 133, 0.1);
    --warning: #F4B860;
    --warning-bg: rgba(244, 184, 96, 0.1);
    --danger: #FF6B6B;
    --danger-bg: rgba(255, 107, 107, 0.1);
    --info: #4F8FE0;
    --info-bg: rgba(79, 143, 224, 0.1);

    /* Text hierarchy */
    --text-primary: #EEF0F4;
    --text-secondary: #B0B8C4;
    --text-muted: #8A93A0;
    --text-dim: #6B7380;

    /* Borders & Shadows */
    --border: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.03);
    --border-hover: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --radius: 8px;

    /* Typography */
    --font-display: 'Satoshi', 'Cabinet Grotesk', Inter, -apple-system, sans-serif;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Type scale */
    --display: 2.25rem;
    --heading: 1.375rem;
    --section: var(--heading);
    --title: 1.05rem;
    --body: 0.875rem;
    --caption: 0.75rem;
    --xs: 0.65rem;
    --data: 0.8125rem;

    /* Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Leading */
    --leading-tight: 1.2;
    --leading-display: 1.15;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Tracking */
    --tracking-tight: -0.02em;
    --tracking-display: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;

    /* Spacing */
    --space-1: 0.25rem;
    --space-1_5: 0.375rem;
    --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;

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --topbar-height: 48px;
    --mobile-nav-height: 56px;

    /* Brand gradient system */
    --gradient-brand: linear-gradient(135deg, #4F8FE0, #7C5CBF);
    --gradient-brand-vertical: linear-gradient(180deg, #4F8FE0, #7C5CBF);
    --gradient-subtle: linear-gradient(135deg, rgba(79, 143, 224, 0.08), rgba(124, 92, 191, 0.05));
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(79, 143, 224, 0.12) 0%, transparent 60%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);

    /* Brand glow */
    --glow-brand: 0 0 20px rgba(79, 143, 224, 0.15);
    --glow-accent: 0 0 12px rgba(79, 143, 224, 0.1);

    /* Section labels */
    --section-eyebrow: 0.65rem;
    --section-eyebrow-weight: 600;
    --section-eyebrow-tracking: 0.08em;

    /* Motion */
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-enter: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-exit: 0.15s ease-in;
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
    --surface-bg: rgba(0, 0, 0, 0.03);
    --surface-bg-hover: rgba(0, 0, 0, 0.06);
    --surface-bg-active: rgba(79, 143, 224, 0.06);
    --surface-border: rgba(0, 0, 0, 0.06);
    --surface-border-hover: rgba(0, 0, 0, 0.1);

    --bg-primary: #F5F6F8;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F0F2F5;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F0F2F5;
    --bg-input: #F0F2F5;
    --bg-sidebar: #F5F6F8;
    --bg-elevated: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-secondary: #FFFFFF;

    --accent-primary: #4A90D9;
    --accent-primary-hover: #357ABD;
    --accent-primary-subtle: rgba(74, 144, 217, 0.06);
    --accent-primary-glow: rgba(74, 144, 217, 0.12);
    --accent-gold: #D4A017;
    --accent-gold-hover: #C4960A;
    --accent-gold-subtle: rgba(212, 160, 23, 0.08);
    --accent-violet: #6B4FA8;
    --accent-violet-hover: #7C5CBF;
    --accent-violet-subtle: rgba(107, 79, 168, 0.08);

    --accent: #4A90D9;
    --accent-hover: #357ABD;
    --accent-subtle: rgba(74, 144, 217, 0.06);
    --accent-glow: rgba(74, 144, 217, 0.12);

    --success: #3CB371;
    --success-bg: rgba(60, 179, 113, 0.08);
    --warning: #D4A017;
    --warning-bg: rgba(212, 160, 23, 0.08);
    --danger: #E05555;
    --danger-bg: rgba(224, 85, 85, 0.08);
    --info: #4A90D9;
    --info-bg: rgba(74, 144, 217, 0.08);

    --text-primary: #1A1D23;
    --text-secondary: #4A4F56;
    --text-muted: #7A808A;
    --text-dim: #A0A6B0;

    --border: rgba(0, 0, 0, 0.06);
    --border-light: rgba(0, 0, 0, 0.03);
    --border-hover: rgba(0, 0, 0, 0.1);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.1);
}