/* =========================================
   DESIGN SYSTEM - CSS VARIABLES
   Professional Travel Agency Theme
   
   Easy to customize: Update colors here and
   they automatically apply throughout the site
   ========================================= */

:root {
    /* PRIMARY COLORS - Professional Travel Agency Palette */
    --color-primary: #1e5a8e;           /* Deep Ocean Blue - Primary brand */
    --color-primary-dark: #143d6b;      /* Darker blue for contrast */
    --color-primary-light: #2a7fb5;     /* Lighter blue for hover states */
    
    /* SECONDARY COLORS - Luxury Accents */
    --color-secondary: #d4af37;         /* Gold - Premium accent */
    --color-secondary-light: #e8c547;   /* Lighter gold for hover */
    --color-secondary-dark: #aa8c2a;    /* Darker gold for depth */
    
    /* ACCENT COLORS - Professional & Vibrant */
    --color-accent-teal: #2d9b9b;       /* Teal - Modern, professional */
    --color-accent-coral: #e67e50;      /* Coral - Warm, inviting */
    --color-accent-green: #27ae60;      /* Green - Trust, growth */
    --color-accent-purple: #667eea;     /* Purple - Current brand element */
    
    /* GRADIENT COMBINATIONS */
    --gradient-primary: linear-gradient(135deg, #1e5a8e 0%, #2a7fb5 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #e8c547 100%);
    --gradient-luxury: linear-gradient(135deg, #1e5a8e 0%, #d4af37 100%);
    --gradient-modern: linear-gradient(135deg, #2d9b9b 0%, #1e5a8e 100%);
    
    /* NEUTRAL COLORS */
    --color-bg-light: #f8f9fa;          /* Light background */
    --color-bg-lighter: #ffffff;        /* Pure white */
    --color-bg-dark: #1a1a1a;           /* Dark background */
    
    /* TEXT COLORS */
    --color-text-primary: #2c3e50;      /* Dark text for readability */
    --color-text-secondary: #5a6c7d;    /* Medium gray text */
    --color-text-light: #ffffff;        /* White text */
    --color-text-muted: #888888;        /* Muted gray */
    
    /* BORDER & DIVIDER COLORS */
    --color-border: #e5e7eb;            /* Light gray border */
    --color-border-dark: #d1d5db;       /* Darker border */
    
    /* STATUS COLORS */
    --color-success: #27ae60;           /* Green for success */
    --color-warning: #f39c12;           /* Orange for warning */
    --color-error: #e74c3c;             /* Red for error */
    --color-info: #3498db;              /* Blue for info */
    
    /* TYPOGRAPHY - Font Families */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-secondary: 'Georgia', 'Times New Roman', serif;
    --font-mono: 'Courier New', monospace;
    
    /* TYPOGRAPHY - Font Sizes */
    --text-xs: 0.75rem;                 /* 12px */
    --text-sm: 0.875rem;                /* 14px */
    --text-base: 1rem;                  /* 16px */
    --text-lg: 1.125rem;                /* 18px */
    --text-xl: 1.25rem;                 /* 20px */
    --text-2xl: 1.5rem;                 /* 24px */
    --text-3xl: 1.875rem;               /* 30px */
    --text-4xl: 2.25rem;                /* 36px */
    --text-5xl: 3rem;                   /* 48px */
    
    /* TYPOGRAPHY - Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* SPACING - Base unit is 4px */
    --space-xs: 0.25rem;                /* 4px */
    --space-sm: 0.5rem;                 /* 8px */
    --space-md: 1rem;                   /* 16px */
    --space-lg: 1.5rem;                 /* 24px */
    --space-xl: 2rem;                   /* 32px */
    --space-2xl: 2.5rem;                /* 40px */
    --space-3xl: 3rem;                  /* 48px */
    --space-4xl: 4rem;                  /* 64px */
    
    /* BORDER RADIUS */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* SHADOWS */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-luxury: 0 15px 35px rgba(212, 175, 55, 0.15);
    
    /* TRANSITIONS */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Z-INDEX SCALE */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* LINE HEIGHT */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
}

/* =========================================
   COLOR SCHEME USAGE GUIDE
   ========================================= 
   
   PRIMARY (Deep Ocean Blue):
   - Main navbar, buttons, headings
   - Links and interactive elements
   - CTA sections background
   
   SECONDARY (Gold):
   - Accents and highlights
   - Premium service badges
   - Hover states and highlights
   
   ACCENT COLORS:
   - Teal: Modern sections, alternative highlights
   - Coral: Warm, inviting CTAs
   - Green: Success states, testimonials
   - Purple: Supporting accent elements
   
   NEUTRALS:
   - Light backgrounds for content sections
   - Dark text for readability on light backgrounds
   - Light text for dark backgrounds
   
   TIPS FOR EDITING:
   1. Change primary color: Update --color-primary and related shades
   2. Adjust gold accent: Modify --color-secondary and its shades
   3. Update text: Change --color-text-primary and --color-text-secondary
   4. Modify spacing: Adjust --space-* variables
   5. Change fonts: Update --font-primary and --font-secondary
   
   ========================================= */