/* ========================================
 * 1. CSS VARIABLES & DESIGN SYSTEM
 * ======================================== */
/**
 * CSS DESIGN SYSTEM
 * =================
 * Centralized design tokens for consistency across the application
 * Edit these variables to update the entire theme
 */
:root {
  /*
   * PRIMARY COLORS
   * Used for interactive elements, buttons, links, focus states
   */
  --primary-blue: #2563eb;          /* Main brand color - WCAG AA compliant */
  --primary-blue-dark: #1d4ed8;     /* Hover states */
  --primary-blue-darker: #FFFFFF;   /* Active states */
  --primary-blue-light: #60a5fa;    /* Light variants */
  --primary-blue-lighter: #FFFFFF;  /* Subtle highlights */

  /* Primary color with opacity for backgrounds */
  --primary-blue-bg: rgba(59, 130, 246, 0.1);      /* 10% opacity */
  --primary-blue-bg-light: rgba(59, 130, 246, 0.05);   /* 5% opacity */
  --primary-blue-bg-lighter: rgba(59, 130, 246, 0.02); /* 2% opacity */

  /*
   * NEUTRAL COLORS
   * Used for text, backgrounds, borders, and general UI elements
   */
  --neutral-50: #f9fafb;   /* Lightest background */
  --neutral-100: #f3f4f6;  /* Light background */
  --neutral-200: #e5e7eb;  /* Border color */
  --neutral-300: #d1d5db;  /* Subtle borders */
  --neutral-400: #9ca3af;  /* Disabled text */
  --neutral-500: #6b7280;  /* Secondary text */
  --neutral-600: #4b5563;  /* Primary text (light mode) */
  --neutral-700: #374151;  /* Headings */
  --neutral-800: #1f2937;  /* Dark backgrounds */
  --neutral-900: #111827;  /* Darkest text */
  --white: #ffffff;        /* Pure white */

  /*
   * STATUS COLORS
   * Used for success states and positive feedback
   */
  --success-green: #059669;      /* Success states */
  --success-green-light: #34d399; /* Light success */

  /*
   * AIRBNB-INSPIRED PALETTE
   * Premium color system for professional, sophisticated UI
   */
  /* Primary Text Colors - Airbnb-style hierarchy */
  --text-primary: #222222;       /* Primary text - near black like Airbnb */
  --text-secondary: #717171;     /* Secondary text - medium gray */
  --text-tertiary: #B0B0B0;      /* Tertiary text - light gray */
  
  /* Background Colors - Sophisticated neutrals */
  --bg-primary: #FFFFFF;         /* Pure white backgrounds */
  --bg-secondary: #F7F7F7;       /* Off-white for contrast */
  --bg-tertiary: #EBEBEB;        /* Light gray for subtle sections */
  
  /* Border Colors - Subtle and refined */
  --border-subtle: #EBEBEB;      /* Subtle borders like Airbnb */
  --border-medium: #DDDDDD;      /* Medium borders for definition */
  
  /* Availability Status Colors - Refined */
  --status-available: #00A699;        /* Airbnb teal instead of green */
  --status-available-bg: #E6F7F5;     /* Teal tint background */
  --status-available-border: #A7F3D0; /* Subtle teal border */
  
  --status-outside-hours: #6B21A8;       /* Deep purple for scheduled spots */
  --status-outside-hours-bg: #FAF5FF;    /* Purple tint background */
  --status-outside-hours-border: #C4B5FD; /* Purple border */
  
  --status-unavailable: #717171;      /* Neutral gray for unavailable */
  --status-unavailable-bg: #F3F4F6;   /* Light neutral background */
  --status-unavailable-border: #D1D5DB; /* Gray border */
  
  /* Accent Colors - Professional touch */
  --accent-teal: #00A699;        /* Airbnb signature teal */
  --accent-teal-light: #80D3CC;  /* Light teal for highlights */
  --accent-teal-dark: #008080;   /* Dark teal for depth */

  /*
   * COMMON BORDERS & TRANSFORMS
   * Reusable border and transform patterns
   */
  --border-light: 1px solid #e5e7eb;  /* Standard border */
  --transform-hover: translateY(-1px); /* Subtle lift on hover */
  --transform-scale: scale(1.05);      /* Scale on interaction */

  /*
   * SPACING SCALE
   * Consistent spacing system for margins, padding, gaps
   * Based on 4px base unit (0.25rem)
   */
  --spacing-xs: 0.25rem;   /* 4px  - Minimal spacing */
  --spacing-sm: 0.5rem;    /* 8px  - Small spacing */
  --spacing-md: 0.75rem;   /* 12px - Medium spacing */
  --spacing-lg: 1rem;      /* 16px - Large spacing */
  --spacing-xl: 1.5rem;    /* 24px - Extra large */
  --spacing-2xl: 2rem;     /* 32px - 2x large */
  --spacing-3xl: 3rem;     /* 48px - 3x large */

  /*
   * BORDER RADIUS
   * Consistent corner rounding for UI elements
   */
  --radius-sm: 0.375rem;   /* 6px  - Small radius */
  --radius-md: 0.5rem;     /* 8px  - Medium radius */
  --radius-lg: 0.75rem;    /* 12px - Large radius */
  --radius-xl: 1rem;       /* 16px - Extra large radius */

  /*
   * SHADOWS
   * Layered shadow system for depth and elevation
   */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Specialized shadows for specific use cases */
  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1);  /* Dropdown menus */
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);       /* Focus rings */
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);          /* Hover states */
  --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.15);          /* Active states */
  
  /* Airbnb-inspired shadows for premium feel */
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-overlay: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-overlay-mobile: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05);

  /*
   * TRANSITIONS & ANIMATIONS
   * Consistent timing for smooth interactions
   */
  --transition-fast: 0.15s ease-in-out;    /* Quick interactions */
  --transition-normal: 0.2s ease-in-out;   /* Standard transitions */
  --transition-slow: 0.3s ease-in-out;     /* Slower animations */
  --transition-cubic: 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Custom easing */

  /*
   * TOUCH TARGETS
   * Minimum sizes for touch-friendly interfaces
   * Based on Apple and Google accessibility guidelines
   */
  --touch-target-sm: 36px;  /* Minimum for secondary actions */
  --touch-target-md: 44px;  /* Recommended minimum */
  --touch-target-lg: 48px;  /* Large touch targets */

  /*
   * RESPONSIVE BREAKPOINTS
   * CRITICAL: Must align with DiscoverConstants.BREAKPOINTS in JavaScript
   * JavaScript: SMALL_PHONE: 375px, MOBILE: 520px, TABLET: 1023px, DESKTOP: 1024px
   */
  --bp-small-phone: 375px;  /* Small phones (DiscoverConstants.SMALL_PHONE) */
  --bp-mobile: 520px;       /* Mobile phones (DiscoverConstants.MOBILE) */
  --bp-tablet: 1023px;      /* Tablets (DiscoverConstants.TABLET) */
  --bp-desktop: 1024px;     /* Desktop (DiscoverConstants.DESKTOP) */

  /*
   * Z-INDEX HIERARCHY
   * ==================
   * Organized stacking system to prevent z-index conflicts
   *
   * CRITICAL RULE: Always use these variables, never hardcode z-index values!
   *
   * Layer Structure (lowest to highest):
   * ------------------------------------
   * Map Layer:           1-2    (Base map and container)
   * Interface Layer:     10-21  (Search, dropdowns, menus)
   * Navigation Layer:    30     (Top navigation bar)
   * Notification Layer:  50-60  (Toasts, blockers)
   * Overlay Layer:       100    (Modals, sheets, panels)
   * Modal Layer:         200    (Full-screen modals)
   * Tooltip Layer:       300    (Tooltips, help text)
   */
  --z-base: 1;             /* Base layer (spot cards, content) */
  --z-map: 1;              /* Google Maps base layer */
  --z-map-container: 2;    /* Map container wrapper */
  --z-elevated: 10;        /* Slightly elevated (buttons, badges) */
  --z-search: 10;          /* Search input and related elements */
  --z-search-focus: 11;    /* Focused search elements */
  --z-header: 50;          /* Headers, sticky elements */
  --z-topbar: 50;          /* Fixed top navigation */
  --z-toast: 60;           /* Toast notifications */
  --z-blocker: 70;         /* Loading blockers, overlays */
  --z-sheet: 100;          /* Bottom sheet, side panels */
  --z-overlay: 100;        /* Sheets, panels, overlays */
  --z-button-elevated: 102; /* Elevated buttons (filters, sort) */
  --z-modal: 200;          /* Full-screen modals */
  --z-tooltip: 300;        /* Tooltips and help text */
  --z-dropdown: 1000;      /* Dropdown containers - High for map compatibility */
  --z-dropdown-menu: 1001; /* Dropdown menu content - High for map compatibility */
  --z-support-chat: 10000; /* Support chat widget */
  --z-high-modal: 999999;  /* High-priority modals (spot details) */
  --z-maximum: 2147483647; /* Maximum safe z-index (amenities popup, critical modals) */
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* NOTE: Dark mode styles (including NUCLEAR OPTION) consolidated in dark-mode.css */