:root {
  /* ============================================================================
     COLOR SYSTEM
     ============================================================================ */
  
  /* Primary Text Colors
     Used for: Main body text, headings, primary content
     Files: All CSS files for text content */
  --color-ink: #0f172a;
  --color-text-primary: #0f172a;
  
  /* Muted/Secondary Text Colors
     Used for: Secondary information, labels, descriptions, help text
     Files: auth_style.css, reservations.css, about.css, explore_bottom_sheet.css */
  --color-muted: #6b7280;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #666;
  
  /* Brand & Interactive Colors
     Used for: Primary buttons, links, active states, brand elements
     Files: All files with interactive elements (buttons, links, navigation) */
  --color-primary: #295e9b;
  --color-primary-hover: #1e4a7a;
  --color-primary-light: rgba(41, 94, 155, 0.12);
  --color-primary-border: rgba(41, 94, 155, 0.8);
  --color-secondary: #3f6ea7;
  
  /* Header/Navigation Brand Color
     Used for: App header background, primary navigation
     Files: app_header.css, landing_style.css */
  --color-header-bg: rgba(241, 56, 99, 0.6);
  --color-header-text: #ffffff;
  
  /* Surface & Background Colors
     Used for: Cards, modals, panels, page backgrounds
     Files: All files with card/panel components */
  --color-surface: #ffffff;
  --color-background: #f7f8fb;
  --color-background-hover: #eef2f7;
  --color-background-secondary: #f9fbff;
  --color-background-dark: #f2f4f8;
  
  /* Border Colors
     Used for: Card borders, input borders, dividers
     Files: All files with bordered elements */
  --color-border: #e3e8ef;
  --color-border-light: #eee;
  
  /* State Colors - Success
     Used for: Success messages, confirmed states, positive actions
     Files: auth_style.css, reservations.css, form-components.css */
  --color-success: #16a34a;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-success-border: #c3e6cb;
  
  /* State Colors - Error/Danger
     Used for: Error messages, validation errors, delete actions
     Files: auth_style.css, reservations.css, form-components.css */
  --color-error: #dc2626;
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;
  --color-error-border: #f5c6cb;
  --color-danger: #c62828;
  --color-danger-hover: #9a0007;
  --color-danger-dark: #c53030;
  
  /* State Colors - Warning
     Used for: Warning messages, pending states, caution indicators
     Files: auth_style.css, reservations.css, booking_mode.css */
  --color-warning: #f39c12;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-warning-border: #ffeeba;
  
  /* State Colors - Info
     Used for: Informational messages, helper text
     Files: auth_style.css, toast.css */
  --color-info: #0ea5e9;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;
  --color-info-border: #bee5eb;
  
  /* Interactive Element Colors
     Used for: Buttons, links, clickable elements
     Files: app_header.css, booking_mode.css, explore_mode.css */
  --color-button-label: #ffffff;
  --color-field-desc-text: #ffffff;
  --color-button-secondary-bg: #eef2f7;
  --color-button-secondary-text: #0f172a;
  
  /* Overlay & Shadow Colors
     Used for: Modal overlays, dimming effects, shadows
     Files: booking_mode.css, explore_mode.css, landing_style.css */
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-overlay-light: rgba(0, 0, 0, 0.5);
  --color-dim: rgba(0, 0, 0, 0.7);
  
  /* Special UI Colors
     Used for: Specific UI elements with unique color requirements
     Files: explore_bottom_sheet.css, map_style.css */
  --color-chevron: #333;
  --color-chevron-secondary: #4b5563;

  /* Map UI Colors
     Used for: Specific POI Map UI elements with unique color requirements
     Files: explore_bottom_sheet.css, map_style.css */
  --poi-container-bg: rgba(0, 0, 0, 0.5);

  
  
  /* ============================================================================
     SPACING SYSTEM
     ============================================================================ */
  
  /* Core Spacing Scale
     Used for: Padding, margins, gaps throughout the application
     Files: All CSS files */
  --space-xs: 0.25rem;   /* 4px - Tight spacing, icon gaps */
  --space-sm: 0.5rem;    /* 8px - Small gaps, compact padding */
  --space-md: 1rem;      /* 16px - Standard spacing, default padding */
  --space-lg: 1.5rem;    /* 24px - Section spacing, card padding */
  --space-xl: 2rem;      /* 32px - Large sections, major spacing */
  --space-2xl: 3rem;     /* 48px - Hero sections, major separators */
  --space-3xl: 4rem;     /* 64px - Extra large spacing */
  
  /* Component-Specific Spacing
     Used for: Consistent component dimensions */
  --space-input-padding: 0.75rem 1.2rem;  /* Used in: booking_mode.css, form inputs */
  --space-button-padding: 0.6rem 1.1rem;  /* Used in: reservations.css, buttons */
  
  /* ============================================================================
     TYPOGRAPHY SYSTEM
     ============================================================================ */
  
  /* Font Families
     Used for: All text content across the application
     Files: All CSS files */
  --font-family-base: 'Bahnschrift SemiLight', 'Bahnschrift', 'Barlow', sans-serif;
  --font-family-display: 'Bahnschrift', 'Barlow', sans-serif;
  --font-family-monospace: monospace;
  
  /* Font Sizes
     Used for: Hierarchical text sizing from small labels to large headings
     Files: All CSS files */
  --font-size-xs: 0.75rem;     /* 12px - Fine print, small labels */
  --font-size-sm: 0.875rem;    /* 14px - Secondary text, captions */
  --font-size-base: 1rem;      /* 16px - Body text, standard content */
  --font-size-md: 1.05rem;     /* 17px - Emphasized body text */
  --font-size-lg: 1.125rem;    /* 18px - Subheadings, large labels */
  --font-size-xl: 1.5rem;      /* 24px - Section headings, card titles */
  --font-size-2xl: 2rem;       /* 32px - Page headings, hero text */
  --font-size-3xl: 2.5rem;     /* 40px - Large display text */
  
  /* Font Weights
     Used for: Text hierarchy and emphasis
     Files: All CSS files */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line Heights
     Used for: Text readability and spacing
     Files: All CSS files */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.75;
  
  /* Letter Spacing
     Used for: Text refinement, brand elements
     Files: app_header.css, landing_style.css */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-normal: 0.04em;
  
  /* ============================================================================
     BORDER RADIUS SYSTEM
     ============================================================================ */
  
  /* Border Radius Scale
     Used for: Consistent rounding across cards, buttons, inputs, modals
     Files: All CSS files with rounded elements */
  --radius-sm: 4px;      /* Small elements, subtle rounding */
  --radius-md: 8px;      /* Standard inputs, small buttons */
  --radius-lg: 10px;     /* Cards, larger buttons - MOST COMMON */
  --radius-xl: 12px;     /* Panels, modals, major cards */
  --radius-2xl: 14px;    /* Large panels, bottom sheets */
  --radius-3xl: 16px;    /* Extra large modals, popups */
  --radius-pill: 20px;   /* Pill-shaped buttons, badges */
  --radius-full: 9999px; /* Circular elements, avatar */
  
  /* Component-Specific Radius
     Used for: Specific UI patterns */
  --radius-sheet-top: 16px 16px 0 0;  /* Used in: explore_bottom_sheet.css */
  
  /* ============================================================================
     SHADOW SYSTEM
     ============================================================================ */
  
  /* Core Shadows - Light Elevation
     Used for: Subtle elevation, cards, inputs
     Files: All files with elevated elements */
  --shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1);
  
  /* Core Shadows - Medium Elevation
     Used for: Dropdowns, popovers, floating elements
     Files: app_header.css, booking_mode.css, explore_mode.css */
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 12px 32px rgba(15, 23, 42, 0.18);
  --shadow-2xl: 0 14px 40px rgba(15, 23, 42, 0.18);
  
  /* Core Shadows - High Elevation
     Used for: Modals, overlays, important UI
     Files: shared_popup.css, booking_mode.css */
  --shadow-3xl: 0 20px 40px rgba(15, 23, 42, 0.25);
  --shadow-overlay: 0 20px 40px rgba(15, 23, 42, 0.25), 0 8px 16px rgba(15, 23, 42, 0.15);
  
  /* Special Shadows
     Used for: Specific visual effects */
  --shadow-header: 0 8px 20px rgba(15, 23, 42, 0.06);  /* Used in: app_header.css */
  --shadow-fab: 0 10px 30px rgba(15, 23, 42, 0.18);    /* Used in: explore_bottom_sheet.css (FAB) */
  --shadow-bottom-sheet: 0 -4px 20px rgba(0, 0, 0, 0.15);  /* Used in: explore_bottom_sheet.css */
  --shadow-tooltip: 0 8px 16px rgba(41, 94, 155, 0.35);    /* Used in: explore_mode.css */
  --shadow-focus: 0 0 0 3px rgba(41, 94, 155, 0.12);       /* Used in: form-components.css */
  
  /* Text Shadows (for landing page effects)
     Used for: Dramatic text effects on video backgrounds
     Files: landing_style.css */
  --text-shadow-glow: 5px 5px 10px rgba(0, 0, 0, 0.7), -5px -5px 10px rgba(255, 255, 255, 0.3);
  
  /* ============================================================================
     TRANSITION SYSTEM
     ============================================================================ */
  
  /* Duration
     Used for: Animation and transition timing
     Files: All CSS files with transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-medium: 250ms ease;
  --transition-slow: 300ms ease;
  
  /* Specific Transition Properties
     Used for: Common animation patterns */
  --transition-transform: transform 0.15s ease;
  --transition-opacity: opacity 0.3s ease;
  --transition-all: all 0.15s ease;
  --transition-background: background 0.15s ease;
  --transition-color: color 150ms ease;
  --transition-shadow: box-shadow 0.15s ease;
  
  /* Interaction Timeout Durations
     Used for: Mobile menu timeout, auto-hide behaviors
     Files: landing.js */
  --duration-mobile-menu-timeout: 2500ms;
  
  /* ============================================================================
     Z-INDEX SYSTEM
     ============================================================================ */
  
  /* Z-Index Layering
     Used for: Consistent stacking order across overlays and modals
     Files: All files with positioned elements */
  --z-base: 0;
  --z-header: 1000;           /* App header - always on top of content */
  --z-bottom-sheet: 1040;     /* Bottom sheet panels */
  --z-dropdown: 1250;         /* Dropdowns, tooltips */
  --z-modal: 1300;            /* Modal overlays (account, auth) */
  --z-popup: 2100;            /* POI popups, detail views */
  --z-lightbox: 2500;         /* Image zoom lightbox */
  --z-alert-modal: 3000;      /* Alert/message modals - above all popups */
  --z-toast: 9999;            /* Toast notifications - highest */
  --z-menu-tooltip: 700;      /* Menu tooltips */
  
  /* ============================================================================
     LAYOUT DIMENSIONS
     ============================================================================ */
  
  /* Header & Navigation
     Used for: Consistent header sizing across views
     Files: app_header.css, auth_style.css, landing_style.css */
  --header-height: 55px;
  --height-header: 55px;  /* Duplicate for compatibility */
  
  /* Interactive Element Sizes
     Used for: Minimum touch targets, consistent sizing
     Files: All files with interactive elements */
  --size-touch-target: 44px;    /* Minimum touch target for accessibility */
  --size-button-height: 44px;   /* Standard button height */
  --size-input-height: 44px;    /* Standard input height */
  --size-icon-sm: 20px;         /* Small icons */
  --size-icon-md: 32px;         /* Medium icons */
  --size-icon-lg: 48px;         /* Large icons */

  /* POI Icon Sizes
     Used for: Map POI markers with background containers
     Files: map_style.css, ExploreMode.js */
  --size-poi-container: 56px;   /* POI marker container size */
  --size-poi-icon: calc(var(--size-poi-container) * 0.6);  /* Icon size (60% of container) */

  /* Campsite Marker Sizes
     Used for: Booking mode campsite markers with teardrop backgrounds
     Files: booking_mode.css, BookingMode.js */
  --size-campsite-marker: 36px;  /* Campsite marker container size (teardrop) */
  --size-campsite-icon: calc(var(--size-campsite-marker) * 0.8);  /* Icon size (60% of marker) */
  --offset-campsite-icon-y: calc(var(--size-campsite-marker) * 0);  /* Vertical offset (-15px for 40px marker) */
  --offset-campsite-icon-fine-y: -2px;  /* Fine-tune vertical position */

  /* Container Widths
     Used for: Content max-widths, responsive layouts
     Files: about.css, reservations.css, app_header.css */
  --width-content-sm: 480px;    /* Small content containers */
  --width-content-md: 1080px;   /* Medium content containers */
  --width-content-lg: 1200px;   /* Large content containers */
  --width-content-max: 94vw;    /* Maximum responsive width */
  
  /* Panel & Sheet Widths
     Used for: Side panels, bottom sheets, modals
     Files: explore_bottom_sheet.css, booking_mode.css */
  --width-panel: 360px;
  --width-panel-max: 92vw;
  
  /* ============================================================================
     BORDER SYSTEM
     ============================================================================ */
  
  /* Border Widths
     Used for: Consistent border sizing
     Files: All files with borders */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;
  
  /* ============================================================================
     FILTER EFFECTS
     ============================================================================ */
  
  /* Image Filters
     Used for: Icon color inversion, image effects
     Files: explore_bottom_sheet.css, landing_style.css */
  --filter-invert: invert(1);
  --filter-icon-white: invert(100%) brightness(200%);
  
  /* ============================================================================
     BACKDROP FILTERS
     ============================================================================ */

  /* Glassmorphism Effects
     Used for: Frosted glass effects on headers and overlays
     Files: app_header.css */
  --backdrop-blur: blur(10px);

  /* ============================================================================
     INFO PAGE BACKGROUND MAP
     ============================================================================ */

  /* Map Background Settings
     Used for: Info page fixed map background
     Files: info.css, info.html */
  --info-map-zoom: 18;            /* Zoom level for background map */
  --info-map-opacity: 1;        /* Opacity of map background (0-1) */
  --info-map-center-lat: 49.70536;  /* Map center latitude */
  --info-map-center-lng: -117.57189; /* Map center longitude */

  /* ============================================================================
     INTRO ANIMATION
     ============================================================================ */

  /* Intro Animation Settings
     Used for: Intro animation logo and icon sizes
     Files: map_style.css, IntroAnimation.js */
  --intro-logo-size: 200px;       /* Main logo container size */
  --intro-icon-size: 75px;        /* Cycling icon overlay size */
}