:root {
    /* Colors - Black/Red Scheme */
    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0a0a;
    --color-bg-tertiary: #111111;
    
    --color-primary: #FF0000;      /* Bright Red */
    --color-primary-dark: #B30000; /* Darker Red */
    
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #CCCCCC;
    --color-text-muted: #666666;
    
    --color-border: #333333;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Typography */
    --font-main: 'Inter', sans-serif;
    
    /* Z-Index Layers */
    --z-background: -1;
    --z-content: 10;
    --z-header: 100;
    --z-modal: 1000;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-main);
    overflow-x: hidden;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}