/**
 * LUVA TRAVEL - HỆ THỐNG MÀU SẮC TẬP TRUNG
 * =====================================================
 *
 * QUAN TRỌNG: ĐÂY LÀ FILE DUY NHẤT CHỨA TẤT CẢ MÀU SẮC
 *
 * QUY TẮC:
 * - Chỉ chỉnh sửa màu sắc trong file này
 * - Sử dụng CSS variables để thay đổi màu toàn bộ theme
 * - KHÔNG hardcode màu sắc trong các file khác
 * - KHÔNG tạo màu mới ở nơi khác
 *
 * Khi thay đổi màu:
 * 1. Chỉnh sửa trong file này
 * 2. Kiểm tra toàn bộ website
 * 3. Cập nhật documentation nếu cần
 *
 * @package Luva Travel Child Theme
 * @since 2.3.0
 * @author Luva Travel Development Team
 * @last-updated December 2024
 */

/* ========================================
   MASTER COLOR SYSTEM - HỆ THỐNG MÀU SẮC CHÍNH
   ======================================== */

:root {
    /* ===== PRIMARY COLORS - MÀU CHÍNH (ORANGE) ===== */
    --yolo-primary: #FBB805;           /* Cam chính sáng - Logo, CTA buttons */
    --yolo-primary-light: #FDD835;     /* Cam sáng - Hover states */
    --yolo-primary-dark: #D4A017;      /* Cam đậm - Active states */
    --yolo-on-primary: #131313;        /* Text on yellow fills (WCAG AA contrast) */
    --yolo-primary-50: #FFF9EE;        /* Cam rất nhạt - Backgrounds */
    --yolo-primary-100: #FFF3DB;       /* Cam nhạt - Light sections */
    --yolo-primary-200: #FEE6B8;       /* Cam mềm - Cards */
    --yolo-primary-300: #FDD885;       /* Cam trung bình nhạt */
    --yolo-primary-400: #FCC94A;       /* Cam trung bình */
    --yolo-primary-500: #FBB805;       /* Cam chính sáng */
    --yolo-primary-600: #D4A017;       /* Cam đậm */
    --yolo-primary-700: #B3870F;       /* Cam rất đậm */
    --yolo-primary-800: #92700A;       /* Cam tối */
    --yolo-primary-900: #725506;       /* Cam rất tối */

    /* ===== SECONDARY COLORS - MÀU PHỤ (NAVY) ===== */
    --yolo-secondary: #131313;         /* Xanh đậm - Headers, text */
    --yolo-secondary-light: #333333;   /* Xanh sáng - Links */
    --yolo-secondary-dark: #0A0A0A;    /* Xanh rất đậm - Footer */
    --yolo-secondary-50: #F5F5F5;      /* Xanh rất nhạt */
    --yolo-secondary-100: #E5E5E5;     /* Xanh nhạt */
    --yolo-secondary-200: #CCCCCC;     /* Xanh mềm */
    --yolo-secondary-300: #999999;     /* Xanh trung bình nhạt */
    --yolo-secondary-400: #666666;     /* Xanh trung bình */
    --yolo-secondary-500: #131313;     /* Xanh chuẩn */
    --yolo-secondary-600: #0F0F0F;     /* Xanh đậm */
    --yolo-secondary-700: #0B0B0B;     /* Xanh rất đậm */
    --yolo-secondary-800: #080808;     /* Xanh tối */
    --yolo-secondary-900: #050505;     /* Xanh rất tối */

    /* ===== ACCENT COLORS - MÀU NHẤN (GOLD) ===== */
    --yolo-accent: #FBB805;            /* Vàng đồng - Highlights */
    --yolo-accent-light: #FDD835;      /* Vàng sáng - Special elements */
    --yolo-accent-dark: #D4A017;       /* Vàng đậm - Borders */
    --yolo-accent-50: #FFF9EE;         /* Vàng rất nhạt */
    --yolo-accent-100: #FFF3DB;        /* Vàng nhạt */
    --yolo-accent-200: #FEE6B8;        /* Vàng mềm */
    --yolo-accent-300: #FDD885;        /* Vàng trung bình nhạt */
    --yolo-accent-400: #FCC94A;        /* Vàng trung bình */
    --yolo-accent-500: #FBB805;        /* Vàng chuẩn */
    --yolo-accent-600: #D4A017;        /* Vàng đậm */
    --yolo-accent-700: #B3870F;        /* Vàng rất đậm */
    --yolo-accent-800: #92700A;        /* Vàng tối */
    --yolo-accent-900: #725506;        /* Vàng rất tối */

    /* ========================================
       NEUTRAL COLORS - MÀU TRUNG TÍNH
       ======================================== */

    /* ===== MÀU CƠ BẢN ===== */
    --yolo-white: #FFFFFF;             /* Trắng tinh khiết */
    --yolo-black: #000000;             /* Đen tinh khiết */
    --yolo-transparent: transparent;    /* Trong suốt */
    /* Common light gray used in footer/text */
    --yolo-light-gray: #CBD5E1;
    /* Light background utility for light sections */
    --yolo-light-bg: #F8FAFC;

    /* ===== ACCENT ALIASES - NHÓM MÀU NHẤN CHUẨN HOÁ ===== */
    --accent-primary: var(--yolo-primary);
    --accent-secondary: var(--yolo-accent);   /* Gold */
    --accent-tertiary: var(--yolo-info);      /* Blue info as nhấn phụ bổ sung */

    /* ===== BACKGROUND SYSTEM - HỆ NỀN CHUẨN HOÁ ===== */
    --bg-page: #FFFFFF;
    --bg-surface: var(--yolo-light-bg);           /* Bề mặt sáng chung */
    --bg-surface-2: #F1F5F9;                      /* Bề mặt sáng cấp 2 */
    --bg-inverse: var(--yolo-secondary-dark);     /* Nền tối (footer/header tối) */

    /* Footer theming tokens (use Customizer var when available) */
    --footer-bg-color: #131313; /* default; Customizer will override in :root */
    --footer-bg: linear-gradient(135deg, #131313 0%, #1A1A1A 50%, #222222 100%);
    --footer-topbar-gradient: linear-gradient(90deg, transparent 0%, var(--yolo-primary) 20%, var(--yolo-primary-light) 50%, var(--yolo-primary) 80%, transparent 100%);
    --footer-border-color: rgba(255, 255, 255, 0.1);
    --footer-link: var(--yolo-light-gray);
    --footer-link-hover: var(--yolo-primary);
    --footer-button-bg: var(--yolo-primary);
    --footer-button-bg-hover: var(--yolo-primary-dark);
    --footer-button-text: var(--yolo-white);
    --footer-button-shadow: rgba(0, 0, 0, 0.2);
    --footer-accent-soft: rgba(251, 184, 5, 0.1);
    --footer-accent-soft-alt: rgba(251, 184, 5, 0.05);
    --footer-accent-overlay: rgba(251, 184, 5, 0.2);
    --footer-accent-overlay-light: rgba(251, 184, 5, 0.15);
    --footer-accent-border: rgba(251, 184, 5, 0.3);
    --footer-accent-shadow-strong: rgba(251, 184, 5, 0.4);
    --footer-accent-focus: rgba(251, 184, 5, 0.25);
    --footer-accent-strong: rgba(251, 184, 5, 0.6);
    --footer-card-gradient: linear-gradient(135deg, rgba(251, 184, 5, 0.1), rgba(253, 216, 53, 0.05));

    /* ===== GRAY SCALE - THANG MÀU XÁM ===== */
    --yolo-gray-50: #FAFAFA;           /* Xám rất nhạt - Page backgrounds */
    --yolo-gray-100: #F5F5F5;          /* Xám nhạt - Section backgrounds */
    --yolo-gray-200: #EEEEEE;          /* Xám mềm - Borders */
    --yolo-gray-300: #E0E0E0;          /* Xám trung bình nhạt - Dividers */
    --yolo-gray-400: #BDBDBD;          /* Xám trung bình - Disabled text */
    --yolo-gray-500: #9E9E9E;          /* Xám chuẩn - Secondary text */
    --yolo-gray-600: #757575;          /* Xám đậm - Body text */
    --yolo-gray-700: #616161;          /* Xám rất đậm - Headings */
    --yolo-gray-800: #424242;          /* Xám tối - Important text */
    --yolo-gray-900: #212121;          /* Xám rất tối - High contrast */

    /* ========================================
        FUNCTIONAL COLORS - MÀU CHỨC NĂNG
       ======================================== */

    /* ===== STATUS COLORS - MÀU TRẠNG THÁI ===== */
    --yolo-success: #10B981;           /* Xanh lá - Success messages */
    --yolo-success-light: #D1FAE5;     /* Xanh lá nhạt - Success backgrounds */
    --yolo-success-dark: #047857;      /* Xanh lá đậm - Success borders */
    --yolo-success-50: #ECFDF5;        /* Success 50 */
    --yolo-success-100: #D1FAE5;       /* Success 100 */
    --yolo-success-200: #A7F3D0;       /* Success 200 */
    --yolo-success-300: #6EE7B7;       /* Success 300 */
    --yolo-success-400: #34D399;       /* Success 400 */
    --yolo-success-500: #10B981;       /* Success 500 */
    --yolo-success-600: #059669;       /* Success 600 */
    --yolo-success-700: #047857;       /* Success 700 */
    --yolo-success-800: #065F46;       /* Success 800 */
    --yolo-success-900: #064E3B;       /* Success 900 */

    --yolo-warning: #F59E0B;           /* Vàng - Warning messages */
    --yolo-warning-light: #FEF3C7;     /* Vàng nhạt - Warning backgrounds */
    --yolo-warning-dark: #D97706;      /* Vàng đậm - Warning borders */
    --yolo-warning-50: #FFFBEB;        /* Warning 50 */
    --yolo-warning-100: #FEF3C7;       /* Warning 100 */
    --yolo-warning-200: #FDE68A;       /* Warning 200 */
    --yolo-warning-300: #FCD34D;       /* Warning 300 */
    --yolo-warning-400: #FBBF24;       /* Warning 400 */
    --yolo-warning-500: #F59E0B;       /* Warning 500 */
    --yolo-warning-600: #D97706;       /* Warning 600 */
    --yolo-warning-700: #B45309;       /* Warning 700 */
    --yolo-warning-800: #92400E;       /* Warning 800 */
    --yolo-warning-900: #78350F;       /* Warning 900 */

    --yolo-error: #EF4444;             /* Đỏ - Error messages */
    --yolo-error-light: #FEE2E2;       /* Đỏ nhạt - Error backgrounds */
    --yolo-error-dark: #DC2626;        /* Đỏ đậm - Error borders */
    --yolo-error-50: #FEF2F2;          /* Error 50 */
    --yolo-error-100: #FEE2E2;         /* Error 100 */
    --yolo-error-200: #FECACA;         /* Error 200 */
    --yolo-error-300: #FCA5A5;         /* Error 300 */
    --yolo-error-400: #F87171;         /* Error 400 */
    --yolo-error-500: #EF4444;         /* Error 500 */
    --yolo-error-600: #DC2626;         /* Error 600 */
    --yolo-error-700: #B91C1C;         /* Error 700 */
    --yolo-error-800: #991B1B;         /* Error 800 */
    --yolo-error-900: #7F1D1D;         /* Error 900 */

    --yolo-info: #3B82F6;              /* Xanh dương - Info messages */
    --yolo-info-light: #DBEAFE;        /* Xanh dương nhạt - Info backgrounds */
    --yolo-info-dark: #1D4ED8;         /* Xanh dương đậm - Info borders */
    --yolo-info-50: #EFF6FF;           /* Info 50 */
    --yolo-info-100: #DBEAFE;          /* Info 100 */
    --yolo-info-200: #BFDBFE;          /* Info 200 */
    --yolo-info-300: #93C5FD;          /* Info 300 */
    --yolo-info-400: #60A5FA;          /* Info 400 */
    --yolo-info-500: #3B82F6;          /* Info 500 */
    --yolo-info-600: #2563EB;          /* Info 600 */
    --yolo-info-700: #1D4ED8;          /* Info 700 */
    --yolo-info-800: #1E40AF;          /* Info 800 */
    --yolo-info-900: #1E3A8A;          /* Info 900 */

    /* ========================================
       SOCIAL MEDIA COLORS - MÀU MẠNG XÃ HỘI
       ======================================== */

    --yolo-facebook: #1877F2;          /* Facebook Blue */
    --yolo-instagram: #E4405F;         /* Instagram Pink */
    --yolo-youtube: #FF0000;           /* YouTube Red */
    --yolo-zalo: #0068FF;              /* Zalo Blue */
    --yolo-whatsapp: #25D366;          /* WhatsApp Green */
    --yolo-telegram: #0088CC;          /* Telegram Blue */
    --yolo-linkedin: #0077B5;          /* LinkedIn Blue */
    --yolo-twitter: #1DA1F2;           /* Twitter Blue */
    --yolo-tiktok: #000000;            /* TikTok Black */
    --yolo-pinterest: #BD081C;         /* Pinterest Red */

    /* ========================================
       LEGACY SUPPORT - HỖ TRỢ MÀU CŨ
       ======================================== */

    /* Backward Compatibility - Tương thích ngược */
    --color-primary: var(--yolo-primary);
    --color-secondary: var(--yolo-secondary);
    --color-accent: var(--yolo-accent);
    --color-white: var(--yolo-white);
    --color-black: var(--yolo-black);

    /* Orange palette compatibility */
    --color-orange-50: var(--yolo-primary-50);
    --color-orange-100: var(--yolo-primary-100);
    --color-orange-200: var(--yolo-primary-200);
    --color-orange-300: var(--yolo-primary-300);
    --color-orange-400: var(--yolo-primary-400);
    --color-orange-500: var(--yolo-primary-500);
    --color-orange-600: var(--yolo-primary-600);
    --color-orange-700: var(--yolo-primary-700);
    --color-orange-800: var(--yolo-primary-800);
    --color-orange-900: var(--yolo-primary-900);

    /* Gray scale compatibility */
    --color-gray-50: var(--yolo-gray-50);
    --color-gray-100: var(--yolo-gray-100);
    --color-gray-200: var(--yolo-gray-200);
    --color-gray-300: var(--yolo-gray-300);
    --color-gray-400: var(--yolo-gray-400);
    --color-gray-500: var(--yolo-gray-500);
    --color-gray-600: var(--yolo-gray-600);
    --color-gray-700: var(--yolo-gray-700);
    --color-gray-800: var(--yolo-gray-800);
    --color-gray-900: var(--yolo-gray-900);

    /* Status colors compatibility */
    --color-success: var(--yolo-success);
    --color-success-light: var(--yolo-success-light);
    --color-success-dark: var(--yolo-success-dark);

    --color-warning: var(--yolo-warning);
    --color-warning-light: var(--yolo-warning-light);
    --color-warning-dark: var(--yolo-warning-dark);

    --color-error: var(--yolo-error);
    --color-error-light: var(--yolo-error-light);
    --color-error-dark: var(--yolo-error-dark);

    --color-info: var(--yolo-info);
    --color-info-light: var(--yolo-info-light);
    --color-info-dark: var(--yolo-info-dark);

    /* Social media compatibility */
    --color-facebook: var(--yolo-facebook);
    --color-instagram: var(--yolo-instagram);
    --color-youtube: var(--yolo-youtube);
    --color-zalo: var(--yolo-zalo);
    --color-whatsapp: var(--yolo-whatsapp);
    --color-telegram: var(--yolo-telegram);
    --color-linkedin: var(--yolo-linkedin);
    --color-twitter: var(--yolo-twitter);
    --color-tiktok: var(--yolo-tiktok);
    --color-pinterest: var(--yolo-pinterest);

    /* Bootstrap compatibility */
    --bs-primary: var(--yolo-primary);
    --bs-primary-rgb: 251, 184, 5;
    --bs-secondary: var(--yolo-secondary);
    --bs-secondary-rgb: 19, 19, 19;
    --bs-success: var(--yolo-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-info: var(--yolo-info);
    --bs-info-rgb: 59, 130, 246;
    --bs-warning: var(--yolo-warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--yolo-error);
    --bs-danger-rgb: 239, 68, 68;
    --bs-light: var(--yolo-gray-100);
    --bs-light-rgb: 245, 245, 245;
    --bs-dark: var(--yolo-gray-900);
    --bs-dark-rgb: 33, 33, 33;

    /* RGB Values for rgba() usage */
    --yolo-primary-rgb: 251, 184, 5;
    --yolo-secondary-rgb: 19, 19, 19;
    --yolo-accent-rgb: 251, 184, 5;
    --yolo-white-rgb: 255, 255, 255;
    --yolo-black-rgb: 0, 0, 0;
    --yolo-gray-100-rgb: 245, 245, 245;
    --yolo-gray-900-rgb: 33, 33, 33;
    --yolo-success-rgb: 16, 185, 129;
    --yolo-warning-rgb: 245, 158, 11;
    --yolo-error-rgb: 239, 68, 68;
    --yolo-info-rgb: 59, 130, 246;
}

/* ========================================
   UTILITY CLASSES - LỚP TIỆN ÍCH
   ======================================== */

/* Text Colors */
.text-yolo-primary { color: var(--yolo-primary) !important; }
.text-yolo-secondary { color: var(--yolo-secondary) !important; }
.text-yolo-accent { color: var(--yolo-accent) !important; }
.text-yolo-success { color: var(--yolo-success) !important; }
.text-yolo-warning { color: var(--yolo-warning) !important; }
.text-yolo-error { color: var(--yolo-error) !important; }
.text-yolo-info { color: var(--yolo-info) !important; }

/* Background Colors */
.bg-yolo-primary { background-color: var(--yolo-primary) !important; }
.bg-yolo-secondary { background-color: var(--yolo-secondary) !important; }
.bg-yolo-accent { background-color: var(--yolo-accent) !important; }
.bg-yolo-success { background-color: var(--yolo-success) !important; }
.bg-yolo-warning { background-color: var(--yolo-warning) !important; }
.bg-yolo-error { background-color: var(--yolo-error) !important; }
.bg-yolo-info { background-color: var(--yolo-info) !important; }

/* Border Colors */
.border-yolo-primary { border-color: var(--yolo-primary) !important; }
.border-yolo-secondary { border-color: var(--yolo-secondary) !important; }
.border-yolo-accent { border-color: var(--yolo-accent) !important; }

/* ========================================
   RESPONSIVE COLOR ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    :root {
        /* Mobile-specific color adjustments if needed */
        --yolo-primary-mobile: var(--yolo-primary);
        --yolo-secondary-mobile: var(--yolo-secondary);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    :root {
        /* Print-friendly colors */
        --yolo-primary: #000000;
        --yolo-secondary: #000000;
        --yolo-accent: #666666;
    }
}

/* ========================================
   DARK MODE SUPPORT (Future)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Dark mode colors will be added here in future versions */
    /* Currently forcing light mode only */
}

/* ========================================
    COLOR VALIDATION
   ======================================== */

/* This section helps validate that all colors are properly defined */
.yolo-color-test {
    /* Test all primary colors */
    color: var(--yolo-primary, red); /* Will show red if variable is undefined */
    background: var(--yolo-secondary, red);
    border-color: var(--yolo-accent, red);
}

/* Astra's default palette is blue (#046bd2) and drives buttons, links and focus
   states it styles; map it to the brand yellow. :root:root outranks Astra's inline :root. */
:root:root {
    --ast-global-color-0: var(--yolo-primary);
    --ast-global-color-1: var(--yolo-primary-dark);
}