:root {
    /* Colors */
    --color-bg: #050511; /* Very dark background */
    --color-bg-card: #0c0c1d; /* Slightly lighter for cards */
    --color-bg-card-hover: #13132b;
    
    --color-primary: #8C52FF; /* Neon Purple */
    --color-primary-dark: #6a3ac7;
    --color-accent: #b429f9; /* Pinkish/Purple accent */
    --color-secondary: #5CE1E6; /* Cyan/Teal accent for graphs/details */
    
    --color-text-main: #FFFFFF;
    --color-text-muted: #B0B0C0;
    --color-text-dark: #050511;

    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(140, 82, 255, 0.5);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #8C52FF 0%, #b429f9 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(140, 82, 255, 0.4) 0%, rgba(5, 5, 17, 0) 70%);
    --gradient-text: linear-gradient(90deg, #FFFFFF 0%, #8C52FF 100%);

    /* Typography */
    --font-family: 'Outfit', sans-serif;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3.5rem;    /* 56px */
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
    
    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-base: all 0.3s ease;
}