:root {
    /* Light theme (default) */
    --primary: #3a7be0;
    --primary-gradient-1: #112fcf;
    --primary-gradient-2: #3b3bc8;
    --primary-gradient-3: #5743ed;
    --primary-gradient-4: #784dd9;
    
    --bg-main: #f8f8f8;
    --bg-card: #f1f1f1;
    --text: #333333;
    --text-muted: #666666;
    --header-gradient-1: rgba(237, 237, 237, 0.9);
    --header-gradient-2: rgba(228, 228, 228, 0.9);
    --border-color: rgba(58, 123, 224, 0.1);
    --bg-hover-rgb: 228, 228, 228;
    --bg-hover-nav: 241, 241, 241;
}

[data-theme="dark"] {
    --bg-main: #0a0a0a;
    --bg-card: #141414;
    --text: #e0e0e0;
    --text-muted: #888888;
    --header-gradient-1: rgba(14, 14, 14, 0.9);
    --header-gradient-2: rgba(41, 41, 41, 0.9);
    --bg-hover-rgb: 17, 17, 17;
    --bg-hover-nav: 20, 20, 20;
}

/* Common tokens */
:root {
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --border-radius: 8px;
    --transition-speed: 0.3s;
    --header-height: 140px;
    
    /* Theme transition with GPU acceleration */
    --theme-transition: color var(--transition-speed) ease,
                       background-color var(--transition-speed) ease;
    --gpu-accelerated: translate3d(0, 0, 0);
}