/**
 * TourSure Promotion - CSS Custom Properties
 * Airbnb-inspired design system
 */

:root {
    /* Primary Colors (Airbnb-inspired) */
    --tspro-primary: #FF385C;
    --tspro-primary-light: #FF5A7D;
    --tspro-primary-dark: #D70466;
    --tspro-primary-bg: rgba(255, 56, 92, 0.08);

    /* Secondary */
    --tspro-secondary: #00A699;
    --tspro-secondary-light: #00C4B4;
    --tspro-secondary-dark: #008578;

    /* Accent (urgency/countdown) */
    --tspro-accent: #FFB400;
    --tspro-accent-light: #FFD166;
    --tspro-accent-dark: #E6A200;

    /* Status Colors */
    --tspro-success: #10B981;
    --tspro-warning: #F59E0B;
    --tspro-danger: #EF4444;
    --tspro-info: #3B82F6;

    /* Gray Scale */
    --tspro-gray-50: #F9FAFB;
    --tspro-gray-100: #F3F4F6;
    --tspro-gray-200: #E5E7EB;
    --tspro-gray-300: #D1D5DB;
    --tspro-gray-400: #9CA3AF;
    --tspro-gray-500: #6B7280;
    --tspro-gray-600: #4B5563;
    --tspro-gray-700: #374151;
    --tspro-gray-800: #1F2937;
    --tspro-gray-900: #111827;

    /* White & Black */
    --tspro-white: #FFFFFF;
    --tspro-black: #000000;

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

    /* Shadows */
    --tspro-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tspro-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --tspro-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
    --tspro-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --tspro-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --tspro-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --tspro-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --tspro-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --tspro-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tspro-font-size-xs: 0.75rem;
    --tspro-font-size-sm: 0.875rem;
    --tspro-font-size-base: 1rem;
    --tspro-font-size-lg: 1.125rem;
    --tspro-font-size-xl: 1.25rem;
    --tspro-font-size-2xl: 1.5rem;
    --tspro-font-size-3xl: 1.875rem;

    /* Spacing */
    --tspro-space-1: 0.25rem;
    --tspro-space-2: 0.5rem;
    --tspro-space-3: 0.75rem;
    --tspro-space-4: 1rem;
    --tspro-space-5: 1.25rem;
    --tspro-space-6: 1.5rem;
    --tspro-space-8: 2rem;

    /* Z-index */
    --tspro-z-dropdown: 100;
    --tspro-z-sticky: 200;
    --tspro-z-overlay: 300;
    --tspro-z-modal: 400;
    --tspro-z-toast: 500;

    /* Container */
    --tspro-container-max: 1280px;
}

/* Badge color variants */
.tspro-badge-percentage { --tspro-badge-bg: var(--tspro-primary); --tspro-badge-color: var(--tspro-white); }
.tspro-badge-fixed_amount { --tspro-badge-bg: var(--tspro-secondary); --tspro-badge-color: var(--tspro-white); }
.tspro-badge-special_price { --tspro-badge-bg: var(--tspro-accent); --tspro-badge-color: var(--tspro-gray-900); }
.tspro-badge-free_upgrade { --tspro-badge-bg: var(--tspro-info); --tspro-badge-color: var(--tspro-white); }
.tspro-badge-bundle { --tspro-badge-bg: var(--tspro-gray-800); --tspro-badge-color: var(--tspro-white); }

/* Status color variants */
.tspro-status-active { --tspro-status-bg: rgba(16, 185, 129, 0.1); --tspro-status-color: var(--tspro-success); }
.tspro-status-upcoming { --tspro-status-bg: rgba(59, 130, 246, 0.1); --tspro-status-color: var(--tspro-info); }
.tspro-status-expired { --tspro-status-bg: rgba(107, 114, 128, 0.1); --tspro-status-color: var(--tspro-gray-500); }
.tspro-status-draft { --tspro-status-bg: rgba(245, 158, 11, 0.1); --tspro-status-color: var(--tspro-warning); }