:root {
    /* Brand Colors */
    --color-primary: #6366f1; /* Indigo 500 */
    --color-secondary: #8b5cf6; /* Violet 500 */
    --color-accent: #06b6d4; /* Cyan 500 */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    --gradient-dark: linear-gradient(to bottom, #0f172a, #1e293b);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

    /* Backgrounds */
    --bg-body: #020617; /* Slate 950 - Very dark blue/black */
    --bg-surface: #0f172a; /* Slate 900 */
    --bg-card: rgba(30, 41, 59, 0.7); /* Slate 800 with opacity */

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Text Colors */
    --text-main: #f8fafc; /* Slate 50 */
    --text-muted: #94a3b8; /* Slate 400 */
    --text-highlight: #e2e8f0; /* Slate 200 */

    /* Spacing & Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Effects */
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
    --backdrop-blur: blur(12px);
    --transition-fast: 0.3s ease;
}