/* ============================================
   DESIGN SYSTEM - VÕ ĐÀO HUY HOÀNG PORTAL
   Theme: Sakura Pink Japanese Style 🌸
   ============================================ */

:root {
    /* ========== COLOR PALETTE ========== */
    
    /* Primary Colors - Dark Theme Base */
    --primary-dark: #1a1625;
    --primary-navy: #211c2f;
    --primary-slate: #2d2640;
    
    /* Sakura Pink Accent Colors */
    --accent-pink: #FFB7C5;
    --accent-pink-light: #FFC8D6;
    --accent-pink-dark: #E891A3;
    --accent-sakura: #FFCCD5;
    --accent-rose: #FF85A2;
    --accent-blue: #7EB6FF;
    --accent-cyan: #89E0EB;
    --accent-green: #98E4B9;
    --accent-amber: #FFD699;
    --accent-red: #FF8A8A;
    --accent-purple: #C4A7FF;
    
    /* Gradient Colors - Sakura Theme */
    --gradient-main: linear-gradient(135deg, #FFB7C5 0%, #FFC8D6 50%, #E891A3 100%);
    --gradient-sakura: linear-gradient(135deg, #FFCCD5 0%, #FFB7C5 50%, #FF85A2 100%);
    --gradient-blue: linear-gradient(135deg, #7EB6FF 0%, #89E0EB 100%);
    --gradient-cyber: linear-gradient(135deg, #1a1625 0%, #2d2640 50%, #3d3556 100%);
    --gradient-glow: linear-gradient(135deg, rgba(255, 183, 197, 0.2) 0%, rgba(255, 200, 214, 0.2) 100%);
    --gradient-green: linear-gradient(135deg, #98E4B9 0%, #7ED4A1 100%);
    
    /* Background Colors - Dark Theme */
    --bg-dark: #1a1625;
    --bg-darker: #13101c;
    --bg-card: #2d2640;
    --bg-card-hover: #3d3556;
    --bg-light: #FFF5F7;
    --bg-white: #FFFFFF;
    
    /* Text Colors */
    --text-primary: #F8F0F2;
    --text-secondary: #C9B8BE;
    --text-muted: #9A8A92;
    --text-dark: #2D2640;
    --text-link: #FFB7C5;
    
    /* Border Colors */
    --border-dark: #3d3556;
    --border-light: #5a4d6e;
    --border-glow: rgba(255, 183, 197, 0.5);
    
    /* Shadow Effects - Sakura Glow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(255, 183, 197, 0.4);
    --shadow-glow-green: 0 0 20px rgba(152, 228, 185, 0.3);
    --shadow-glow-cyan: 0 0 20px rgba(137, 224, 235, 0.3);
    --shadow-sakura: 0 4px 20px rgba(255, 183, 197, 0.3);
    
    /* ========== TYPOGRAPHY ========== */
    --font-primary: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* ========== SPACING ========== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* ========== Z-INDEX ========== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    
    /* ========== CONTAINER ========== */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
}

/* ========== LIGHT THEME - SAKURA 🌸 ========== */
[data-theme="light"] {
    /* Background Colors - Soft Sakura */
    --bg-dark: #FFF8F9;
    --bg-darker: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FFF0F3;
    
    /* Text Colors - Dark for readability */
    --text-primary: #2D2640;
    --text-secondary: #5A4D6E;
    --text-muted: #7A6D8A;
    --text-link: #E891A3;
    
    /* Accent adjustments for light theme */
    --accent-pink: #E891A3;
    --accent-pink-light: #FFB7C5;
    --accent-pink-dark: #D47A8E;
    --accent-blue: #5A9EE8;
    --accent-cyan: #5DC4CF;
    --accent-green: #5EBF8A;
    --accent-purple: #9B7FE8;
    
    /* Borders */
    --border-dark: #FFE4E9;
    --border-light: #FFCCD5;
    --border-glow: rgba(232, 145, 163, 0.5);
    
    /* Shadows - Softer */
    --shadow-sm: 0 2px 8px rgba(45, 38, 64, 0.08);
    --shadow-md: 0 4px 16px rgba(45, 38, 64, 0.12);
    --shadow-lg: 0 8px 32px rgba(45, 38, 64, 0.16);
    --shadow-glow: 0 0 20px rgba(232, 145, 163, 0.25);
    --shadow-sakura: 0 4px 20px rgba(232, 145, 163, 0.2);
    
    /* Gradient adjustments */
    --gradient-main: linear-gradient(135deg, #E891A3 0%, #FFB7C5 50%, #D47A8E 100%);
    --gradient-sakura: linear-gradient(135deg, #FFB7C5 0%, #E891A3 50%, #D47A8E 100%);
    --gradient-glow: linear-gradient(135deg, rgba(232, 145, 163, 0.15) 0%, rgba(255, 183, 197, 0.15) 100%);
    --gradient-cyber: linear-gradient(135deg, #FFF8F9 0%, #FFF0F3 50%, #FFE4E9 100%);
}