/* ===== UNIFIED COLOR SYSTEM ===== */
:root {
    /* Primary Colors - Deep and Dark Theme */
    --color-black: #000000;           /* Pure black for backgrounds */
    --color-white: #ffffff;           /* Pure white for text and accents */
    --color-red: #dc2626;             /* Brand red for CTAs and accents */
    
    /* Grayscale Palette */
    --color-gray-900: #0a0a0a;        /* Almost black */
    --color-gray-800: #1a1a1a;        /* Very dark gray */
    --color-gray-700: #2d2d2d;        /* Dark gray */
    --color-gray-600: #404040;        /* Medium dark gray */
    --color-gray-500: #666666;        /* Medium gray */
    --color-gray-400: #999999;        /* Light gray */
    --color-gray-300: #cccccc;        /* Very light gray */
    --color-gray-200: #e5e5e5;        /* Almost white gray */
    --color-gray-100: #f5f5f5;        /* Very light gray */
    
    /* Semantic Colors */
    --color-background: var(--color-black);
    --color-surface: var(--color-gray-800);
    --color-surface-light: var(--color-gray-700);
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-gray-300);
    --color-text-muted: var(--color-gray-400);
    --color-accent: var(--color-red);
    --color-accent-hover: #b91c1c;    /* Darker red for hover */
    
    /* Transparent Colors */
    --color-overlay: rgba(0, 0, 0, 0.8);
    --color-overlay-light: rgba(0, 0, 0, 0.6);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-red-10: rgba(220, 38, 38, 0.1);
    --color-red-20: rgba(220, 38, 38, 0.2);
    
    /* Border Colors */
    --color-border: var(--color-gray-600);
    --color-border-light: var(--color-gray-500);
    --color-border-focus: var(--color-red);
    
    /* Shadow Colors */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
    
    /* Status Colors */
    --color-success: #16a34a;
    --color-success-bg: rgba(22, 163, 74, 0.1);
    --color-error: #dc2626;
    --color-error-bg: rgba(220, 38, 38, 0.1);
    --color-warning: #d97706;
    --color-warning-bg: rgba(217, 119, 6, 0.1);
}