/* ============================================
   VARIABLES.CSS - CSS Custom Properties
   ============================================ */

:root {
    /* Colors - Dark Mode (Default) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --card-bg: #1e1e1e;
    --border-color: #333333;
    --border-color-hover: #444444;
    
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    
    --primary: #ff6b6b;
    --primary-hover: #ff5252;
    --secondary: #667eea;
    --secondary-hover: #5568d3;
    
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;
    
    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-Index Scale */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-embed: 10000;
--z-modal-backdrop: 10100;
--z-modal: 10100;
--z-tooltip: 10200;
}

/* Light Mode Variables (for future) */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --card-bg: #ffffff;
    --border-color: #e0e0e0;
    --text-primary: #000000;
    --text-secondary: #666666;
    /* Add more when needed */
}