/**
 * BOOKING VARIABLES - BOOKING-SPECIFIC OVERRIDES ONLY
 *
 * This file contains ONLY booking-specific variables that extend the master
 * variables.css file. Do NOT duplicate global variables here.
 *
 * Version: 4.0.0
 * Created: 2025-01-23
 * Author: Senior Frontend Engineering Team
 *
 * IMPORTANT:
 * - Master variables.css MUST load before this file
 * - This file only contains booking-specific extensions
 * - Do NOT duplicate global variables
 * - Use global variables via var() when possible
 *
 * LOADING ORDER:
 * 1. static/css/variables.css (MASTER)
 * 2. This file (booking overrides)
 * 3. Other booking CSS files
 */

/* ==========================================================================
   BOOKING Z-INDEX - Extensions to Master Scale
   ========================================================================== */

:root {
    /* Booking-specific z-index (extends master scale)
     * Master scale: dropdown (10), sticky (20), modal (50), tooltip (70)
     * Booking additions for calendar and sidebar
     */
    --booking-z-sidebar: 30;                /* Booking sidebar (between sticky and fixed) */
    --booking-z-calendar-backdrop: 45;      /* Calendar backdrop (between modal-backdrop and modal) */
    --booking-z-calendar-modal: 55;         /* Calendar modal (above standard modal) */
    --booking-z-toast: 80;                  /* Toast notifications (highest) */

    /* Legacy z-index for backward compatibility */
    --z-index-calendar-modal: 1060;         /* Legacy - use --booking-z-calendar-modal instead */
}

/* ==========================================================================
   BOOKING LAYOUT - Booking-Specific Dimensions
   ========================================================================== */

:root {
    /* ===== Booking Container Sizes ===== */
    --booking-max-width: var(--container-max-width);     /* 1200px - same as global */
    --booking-main-max-width: 750px;                     /* Max width for form content */
    --booking-sidebar-width: 380px;                      /* Sidebar width (desktop) */
    --booking-card-width: 520px;                         /* Card components width */
    --booking-form-max-width: 900px;                     /* Max width for forms */

    /* ===== Booking Spacing (use global spacing scale) ===== */
    --booking-container-padding: var(--spacing-xl);      /* 32px */
    --booking-section-gap: var(--spacing-2xl);           /* 40px */

    /* ===== Mobile-Specific Booking Layout ===== */
    --booking-mobile-padding: var(--spacing-md);         /* 16px */
    --booking-mobile-margin: var(--spacing-sm);          /* 8px */
    --booking-mobile-sidebar-height: auto;               /* Auto height for mobile sidebar */
}

/* ==========================================================================
   BOOKING NAVBAR - Height Overrides for Spacing Calculations
   ========================================================================== */

:root {
    /* Navbar heights for consistent spacing calculations in booking pages
     * These match the master navbar heights
     */
    --navbar-height-desktop: 56px;      /* Desktop navbar height */
    --navbar-height-tablet: 50px;       /* Tablet navbar height */
    --navbar-height-mobile: 50px;       /* Mobile navbar height */
}

/* ==========================================================================
   BOOKING COMPONENTS - Component-Specific Variables
   ========================================================================== */

:root {
    /* ===== Sidebar ===== */
    --booking-sidebar-bg: var(--color-background);
    --booking-sidebar-border: var(--color-border);
    --booking-sidebar-shadow: var(--shadow-lg);
    --booking-sidebar-transition: transform var(--transition-base);

    /* ===== Property Header ===== */
    --booking-property-header-height: 400px;
    --booking-property-header-mobile-height: 300px;
    --booking-property-header-overlay: rgba(0, 0, 0, 0.3);

    /* ===== Calendar Modal ===== */
    --booking-calendar-modal-width: 90%;
    --booking-calendar-modal-max-width: 600px;
    --booking-calendar-modal-bg: var(--color-background);
    --booking-calendar-modal-border-radius: var(--radius-lg);

    /* ===== Forms ===== */
    --booking-form-input-height: 48px;
    --booking-form-input-border: var(--color-border);
    --booking-form-input-focus-border: var(--primary-color);
    --booking-form-input-focus-shadow: 0 0 0 3px rgba(12, 35, 64, 0.1);

    /* ===== Progress Bar ===== */
    --booking-progress-height: 4px;
    --booking-progress-bg: var(--gray-200);
    --booking-progress-fill: var(--primary-color);

    /* ===== Price Display ===== */
    --booking-price-color: var(--primary-color);
    --booking-price-size: var(--font-size-2xl);
    --booking-price-weight: var(--font-weight-bold);
}

/* ==========================================================================
   BOOKING ALIASES - Use Global Variables with Booking Prefix
   ========================================================================== */

:root {
    /* Color Aliases (reference global colors) */
    --booking-primary: var(--primary-color);
    --booking-primary-hover: var(--primary-color-light);
    --booking-accent: var(--accent-color);
    --booking-success: var(--success-color);
    --booking-error: var(--error-color);
    --booking-warning: var(--warning-color);
    --booking-info: var(--info-color);

    --booking-white: var(--white-color);
    --booking-black: var(--black-color);

    --booking-text-primary: var(--color-text-primary);
    --booking-text-secondary: var(--color-text-secondary);
    --booking-text-muted: var(--color-text-muted);

    --booking-background: var(--color-background);
    --booking-surface: var(--color-background-secondary);
    --booking-border: var(--color-border);

    /* Grayscale Aliases */
    --booking-gray-50: var(--gray-100);
    --booking-gray-100: var(--gray-100);
    --booking-gray-200: var(--gray-200);
    --booking-gray-300: var(--gray-300);
    --booking-gray-400: var(--gray-400);
    --booking-gray-500: var(--gray-500);
    --booking-gray-600: var(--gray-600);
    --booking-gray-700: var(--gray-700);
    --booking-gray-800: var(--gray-800);
    --booking-gray-900: var(--gray-900);

    /* Spacing Aliases */
    --booking-space-xs: var(--spacing-xs);
    --booking-space-sm: var(--spacing-sm);
    --booking-space-md: var(--spacing-md);
    --booking-space-lg: var(--spacing-lg);
    --booking-space-xl: var(--spacing-xl);
    --booking-space-2xl: var(--spacing-2xl);
    --booking-space-3xl: var(--spacing-3xl);
    --booking-space-4xl: var(--spacing-4xl);

    /* Typography Aliases */
    --booking-text-xs: var(--font-size-xs);
    --booking-text-sm: var(--font-size-sm);
    --booking-text-base: var(--font-size-base);
    --booking-text-lg: var(--font-size-lg);
    --booking-text-xl: var(--font-size-xl);
    --booking-text-2xl: var(--font-size-2xl);
    --booking-text-3xl: var(--font-size-3xl);
    --booking-text-4xl: var(--font-size-4xl);
    --booking-text-5xl: var(--font-size-5xl);

    --booking-font-regular: var(--font-weight-regular);
    --booking-font-medium: var(--font-weight-medium);
    --booking-font-semibold: var(--font-weight-semibold);
    --booking-font-bold: var(--font-weight-bold);

    /* Border Radius Aliases */
    --booking-radius-sm: var(--radius-sm);
    --booking-radius-md: var(--radius-md);
    --booking-radius-lg: var(--radius-lg);
    --booking-radius-xl: var(--radius-xl);
    --booking-radius-2xl: var(--radius-2xl);
    --booking-radius-full: var(--radius-full);

    /* Shadow Aliases */
    --booking-shadow-sm: var(--shadow-sm);
    --booking-shadow-md: var(--shadow-md);
    --booking-shadow-lg: var(--shadow-lg);
    --booking-shadow-xl: var(--shadow-xl);
    --booking-shadow-2xl: var(--shadow-2xl);

    /* Transition Aliases */
    --booking-transition-fast: var(--transition-fast);
    --booking-transition-base: var(--transition-base);
    --booking-transition-slow: var(--transition-slow);

    /* Elevation (Shadow) Aliases for Backward Compatibility */
    --booking-elevation-1: var(--shadow-sm);
    --booking-elevation-2: var(--shadow-md);
    --booking-elevation-3: var(--shadow-lg);
    --booking-elevation-4: var(--shadow-xl);

    /* Color Variations for Backward Compatibility */
    --booking-primary-50: var(--color-primary-50);
    --booking-primary-100: var(--color-primary-100);
    --booking-primary-200: var(--color-primary-200);
    --booking-primary-300: var(--color-primary-300);
    --booking-primary-400: var(--color-primary-400);
    --booking-primary-500: var(--color-primary-500);
    --booking-primary-600: var(--color-primary-600);
    --booking-primary-700: var(--color-primary-700);
    --booking-primary-800: var(--color-primary-800);
    --booking-primary-900: var(--color-primary-900);

    --booking-primary-bg: var(--color-primary-50);
    --booking-primary-border: var(--primary-color);

    /* Semantic Color Aliases */
    --booking-success-bg: #d1fae5;
    --booking-success-border: var(--success-color);
    --booking-error-bg: #fee2e2;
    --booking-error-border: var(--error-color);
    --booking-warning-bg: #fef3c7;
    --booking-warning-border: var(--warning-color);
    --booking-info-bg: #dbeafe;
    --booking-info-border: var(--info-color);
}

/* ==========================================================================
   BOOKING DARK MODE - Overrides
   ========================================================================== */

[data-theme="dark"] {
    /* Booking-specific dark mode overrides */
    --booking-sidebar-bg: var(--color-dark-bg-light);
    --booking-sidebar-border: var(--color-dark-border);

    --booking-calendar-modal-bg: var(--color-dark-bg-light);

    --booking-form-input-border: var(--color-dark-border);
    --booking-form-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);

    --booking-progress-bg: var(--gray-700);

    --booking-primary-bg: rgba(12, 35, 64, 0.2);

    --booking-success-bg: rgba(39, 174, 96, 0.2);
    --booking-error-bg: rgba(231, 76, 60, 0.2);
    --booking-warning-bg: rgba(243, 156, 18, 0.2);
    --booking-info-bg: rgba(52, 152, 219, 0.2);
}

/* ==========================================================================
   NOTES & DOCUMENTATION
   ========================================================================== */

/*
 * BOOKING VARIABLES GUIDELINES:
 *
 * DO:
 * - Add ONLY booking-specific variables here
 * - Use global variables via var() when possible
 * - Document why a variable is booking-specific
 * - Follow naming convention: --booking-property-variant
 *
 * DON'T:
 * - Duplicate global variables
 * - Redefine colors that exist globally
 * - Create unnecessary aliases
 * - Override global variables without good reason
 *
 * LOADING ORDER:
 * 1. static/css/variables.css (global master)
 * 2. This file (booking overrides)
 * 3. bookings/static/bookings/css/core/*.css
 * 4. bookings/static/bookings/css/components/*.css
 * 5. bookings/static/bookings/css/pages/*.css
 *
 * MIGRATION NOTES:
 * - All global color/spacing/typography values now reference master variables
 * - Booking-specific layout dimensions retained
 * - Z-index extends master scale
 * - Aliases provided for backward compatibility
 */