/**
 * 🎨 Unified CSS Variables
 * Giải quyết xung đột giữa main.css và design-system.css
 * File này phải được load TRƯỚC tất cả các file CSS khác
 */

:root {
    /* ==================== FONT SYSTEM ==================== */
    /* Primary font family - Inter with fallbacks */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-family: var(--font-primary); /* Alias for design-system compatibility */
    
    /* Font Sizes - Unified */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* ==================== COLOR SYSTEM ==================== */
    /* Primary Colors - Design System style */
    --primary-color: rgb(124, 45, 18);      /* Rich brown */
    --primary-bg: rgb(252, 211, 77);        /* Warm yellow */
    --color-primary: var(--primary-color);  /* Alias for main.css compatibility */
    --color-primary-dark: rgb(100, 35, 14); /* Darker brown */
    
    /* Secondary Colors */
    --secondary-color: #444;                /* Dark gray */
    --secondary-bg: #fafafa;                /* Light gray */
    --color-secondary: var(--secondary-color);
    
    /* Semantic Colors */
    --success-color: #065f46;               /* Forest green */
    --success-bg: #d1fae5;                 /* Light green */
    --color-success: var(--success-color);
    
    --warning-color: #92400e;               /* Amber brown */
    --warning-bg: #fef3c7;                 /* Light amber */
    --color-warning: var(--warning-color);
    
    --danger-color: #991b1b;                /* Deep red */
    --danger-bg: #fecaca;                   /* Light red */
    --color-error: var(--danger-color);
    
    --info-color: #1e40af;                  /* Blue */
    --info-bg: #dbeafe;                     /* Light blue */
    
    /* ==================== NEUTRAL COLORS ==================== */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    
    /* Text Colors */
    --color-text-primary: var(--neutral-800);
    --color-text-secondary: var(--neutral-600);
    --color-text-light: var(--neutral-500);
    
    /* Background Colors */
    --color-bg-primary: var(--neutral-50);
    --color-bg-secondary: var(--neutral-100);
    --color-bg-tertiary: var(--neutral-200);
    
    /* Border Colors */
    --color-border: var(--neutral-300);
    --color-border-light: var(--neutral-200);
    
    /* ==================== SPACING SCALE ==================== */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    
    /* ==================== BORDER RADIUS ==================== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    
    /* ==================== SHADOWS - 3D STYLE ==================== */
    --shadow-sm: 2px 2px 0 0;
    --shadow-md: 3px 3px 0 0;
    --shadow-lg: 5px 5px 0 0;
    --shadow-xl: 7px 7px 0 0;
    --shadow-2xl: 10px 10px 0 0;
    
    /* ==================== TRANSITIONS ==================== */
    --transition-fast: 100ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* ==================== RETRO THEME COMPATIBILITY ==================== */
    --retro-dark: #2e2e2e;
    --retro-white: #fff;
    --retro-green: #6abc3a;
    --retro-shadow-full: 0px 10px #00000038, 5px 5px #00000038, -5px 5px #00000038;
}

/* ==================== DARK MODE OVERRIDES ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* 🌙 Beautiful Dark Mode Color Palette - Carefully designed for readability */
        --neutral-50: #0f0f23;      /* Very dark blue-black background */
        --neutral-100: #1a1a2e;     /* Dark background for cards */
        --neutral-200: #16213e;     /* Slightly lighter background */
        --neutral-300: #0f3460;     /* Border color */
        --neutral-400: #533483;     /* Muted text */
        --neutral-500: #7209b7;     /* Medium contrast text */
        --neutral-600: #a663cc;     /* Higher contrast text */
        --neutral-700: #d4adfc;     /* Light text */
        --neutral-800: #e5d4ff;     /* Primary text color */
        --neutral-900: #f0ebff;     /* Highest contrast text */
        
        /* 🎨 Dark Mode Primary Colors - Softer but still visible */
        --primary-color: #fbbf24;                    /* Warm gold instead of brown */
        --primary-bg: rgba(59, 130, 246, 0.15);     /* Semi-transparent blue bg */
        --color-primary: var(--primary-color);      /* Alias for main.css compatibility */
        --color-primary-dark: #f59e0b;              /* Darker gold */
        
        /* 🟢 Success colors - Green tones for dark mode */
        --success-color: #34d399;                   /* Bright green */
        --success-bg: rgba(52, 211, 153, 0.15);
        --color-success: var(--success-color);
        
        /* 🟡 Warning colors - Amber tones */
        --warning-color: #fbbf24;                   /* Bright amber */
        --warning-bg: rgba(251, 191, 36, 0.15);
        --color-warning: var(--warning-color);
        
        /* 🔴 Danger colors - Red tones */
        --danger-color: #f87171;                    /* Bright red */
        --danger-bg: rgba(248, 113, 113, 0.15);
        --color-error: var(--danger-color);
        
        /* 🔵 Info colors - Blue tones */
        --info-color: #60a5fa;                      /* Bright blue */
        --info-bg: rgba(96, 165, 250, 0.15);
        
        /* 🌫️ Secondary colors */
        --secondary-color: #9ca3af;                 /* Light gray */
        --secondary-bg: rgba(156, 163, 175, 0.1);
        --color-secondary: var(--secondary-color);
        
        /* 📝 Text Colors for dark mode */
        --color-text-primary: var(--neutral-800);
        --color-text-secondary: var(--neutral-600);
        --color-text-light: var(--neutral-500);
        
        /* 🏠 Background Colors for dark mode */
        --color-bg-primary: var(--neutral-50);
        --color-bg-secondary: var(--neutral-100);
        --color-bg-tertiary: var(--neutral-200);
        
        /* 🚧 Border Colors for dark mode */
        --color-border: var(--neutral-300);
        --color-border-light: var(--neutral-200);
    }
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media (max-width: 768px) {
    :root {
        /* Adjust font sizes for mobile */
        --font-size-4xl: 2rem;     /* 32px */
        --font-size-3xl: 1.75rem;  /* 28px */
        --font-size-2xl: 1.375rem; /* 22px */
        
        /* Adjust spacing for mobile */
        --space-12: 2rem;    /* 32px */
        --space-16: 2.5rem;  /* 40px */
    }
}