/*
 * CSS Variables - Premium Color Palette
 * Màu vàng sang trọng (Gold) làm màu chủ đạo
 */

:root {
    /* Primary - Gold (Màu chủ đạo - Champagne Gold sang trọng) */
    --primary-900: #8B7355;
    --primary-800: #A08060;
    --primary-700: #B8956C;
    --primary-600: #C6A87D;
    --primary-500: #D4B896;
    --primary-400: #E8CDB0;
    --primary-300: #F0DCC8;
    --primary-200: #F7E8DA;
    --primary-100: #FBF3EB;
    --primary-50: #FDFAF7;

    /* Secondary (Navy Blue - Màu phụ) */
    --secondary-900: #001a33;
    --secondary-800: #002244;
    --secondary-700: #003366;
    --secondary-600: #004488;
    --secondary-500: #0055aa;
    --secondary-400: #3377bb;
    --secondary-100: #e6f0fa;
    --secondary-50: #f0f6fc;

    /* Accent (Orange CTA) */
    --accent-700: #cc4400;
    --accent-600: #e55a00;
    --accent-500: #FF6600;
    --accent-400: #ff8533;
    --accent-100: #fff4eb;

    /* Premium Gold - Champagne/Rose Gold sang trọng */
    --gold-700: #B8956C;
    --gold-600: #C6A87D;
    --gold-500: #D4B896;
    --gold-400: #E8CDB0;
    --gold-300: #F0DCC8;
    --gold-200: #F7E8DA;
    --gold-100: #FBF3EB;
    --gold-50: #FDFAF7;

    /* Neutrals */
    --gray-900: #1a1a1a;
    --gray-800: #2d2d2d;
    --gray-700: #4a4a4a;
    --gray-600: #666666;
    --gray-500: #888888;
    --gray-400: #aaaaaa;
    --gray-300: #cccccc;
    --gray-200: #e5e5e5;
    --gray-100: #f5f5f5;
    --gray-50: #fafafa;

    /* Semantic Colors */
    --success: #28a745;
    --success-light: #d4edda;
    --warning: #ffc107;
    --warning-light: #fff3cd;
    --danger: #dc3545;
    --danger-light: #f8d7da;
    --info: #17a2b8;
    --info-light: #d1ecf1;

    /* Shortcuts - Gold làm primary */
    --primary: var(--primary-500);
    --primary-dark: var(--primary-700);
    --accent: var(--accent-500);
    --gold: var(--gold-400);
    --text: var(--gray-800);
    --text-muted: var(--gray-600);
    --bg: var(--gray-50);
    --white: #ffffff;

    /* Layout */
    --container: 1400px;
    --container-sm: 1200px;
    --sidebar-w: 280px;

    /* Typography */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows - Gold tones (Champagne glow) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 20px rgba(212, 184, 150, 0.4);
    --shadow-gold: 0 4px 25px rgba(212, 184, 150, 0.5);
    --shadow-accent: 0 4px 20px rgba(255, 102, 0, 0.25);

    /* Transitions */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    /* Z-index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}