:root {
    /* Color Palette - Blue Forward, Purple Accent */
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-text-main: #172b4d;
    --color-text-muted: #5e6c84;
    
    --color-primary: #0052cc; /* Clinical Blue */
    --color-primary-light: #deebff;
    
    --color-accent: #6554c0; /* Purple */
    --color-accent-light: #eae6ff;
    
    --color-border: #dfe1e6;
    --color-border-hover: #b3bac5;

    /* Theme-dependent variables (Default Blue) */
    --theme-focus: var(--color-primary);
    --theme-highlight: var(--color-primary-light);
    
    /* Typography */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Courier, monospace;
    
    /* Spacing Scale (8pt grid base) */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 3rem;     /* 48px */
    --space-xl: 5rem;     /* 80px */
    
    /* Transitions */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --duration-fast: 200ms;
    --duration-med: 400ms;
    
    /* Layout */
    --rail-width: 60px;
    --hud-height: 50px;
    --max-width: 1000px;
}

/* Shade Guide: Accent Mode */
[data-theme="accent"] {
    --theme-focus: var(--color-accent);
    --theme-highlight: var(--color-accent-light);
    --color-primary: var(--color-accent); /* Swap primary for accent in key areas */
}

@media (max-width: 768px) {
    :root {
        --rail-width: 0px; /* Rail moves to bottom */
        --space-lg: 2rem;
        --space-xl: 3rem;
    }
}