/**
 * CSS Custom Properties (Variables)
 * Centralized design tokens for consistent theming
 * Extracted from custom.css and consolidated for better organization
 *
 * CSS_LAYER_AND_LOAD_ORDER:
 * - Base: this file (variables.css) = design tokens (--surface-*, --border-ui-*, --state-*, --text-*); responsive-breakpoints.css = breakpoints and touch targets.
 * - Page-specific CSS (discover, list-spot, renter) must not redefine those tokens; they may define page-specific aliases or overrides only.
 * - ListSpot load order: base (from base.html) then list-spot design-system, steps, forms, support (list-spot-support.css), step-transition-loader, listspot-navigation, listspot-overrides.css last.
 * - Folder rules for AI: see ../CSS_OWNERSHIP.txt
 */

:root {
  /* ===== COLOR TOKENS ===== */

  /* Primary Colors - Professional Blue Palette */
  --color-primary-blue: #2563eb;
  --color-primary-blue-hover: #1e40af;
  --color-primary-blue-light: #eff6ff;

  /* Brand accent — aligned with iOS AccentColor (conversion CTAs, not semantic success)
   * Fill: --color-brand-accent* on solid CTAs (paired with --color-brand-accent-text).
   * Foreground: --color-brand-accent-fg* for text, links, icons, outline borders. */
  --color-brand-accent: #0f5a56;
  --color-brand-accent-hover: #0c4e4a;
  --color-brand-accent-pressed: #083f3c;
  --color-brand-accent-text: #ffffff;
  --color-brand-accent-text-on-light: #0f5a56;
  --color-brand-accent-fg: #0f5a56;
  --color-brand-accent-fg-hover: #0c4e4a;
  --color-brand-accent-focus: rgba(120, 113, 108, 0.45);
  --color-brand-accent-shadow: 0 8px 24px rgba(15, 90, 86, 0.28),
    0 2px 8px rgba(15, 90, 86, 0.16);
  --color-brand-accent-outline-hover: rgba(15, 90, 86, 0.09);
  /* Dark-surface readable brand (canonical; also aliased as --color-brand-accent-on-dark) */
  --color-brand-accent-on-dark-surface: #5eead4;
  --color-brand-accent-on-dark-surface-hover: #99f6e4;
  --color-brand-accent-on-dark-surface-focus: rgba(94, 234, 212, 0.35);
  --color-brand-accent-on-dark: var(--color-brand-accent-on-dark-surface);
  --color-brand-accent-on-dark-hover: var(--color-brand-accent-on-dark-surface-hover);

  /*
   * Host product surfaces (list/auth gates/terms/authoring handoff).
   * Primary = brand teal for interactive CTAs (not indigo marketing, not emerald success).
   * Page/card = quiet slate authoring shell (shared with host-authoring.css aliases).
   *
 * Do NOT use these on renter About (/about) or host marketing landing (/host).
 * Renter public marketing = cool teal mist (marketing-landing.css).
 * Host public marketing = warm operator + amber (host-landing.css).
 */
  --host-product-primary: var(--color-brand-accent);
  --host-product-primary-hover: var(--color-brand-accent-hover);
  --host-product-primary-pressed: var(--color-brand-accent-pressed);
  --host-product-primary-text: var(--color-brand-accent-text);
  --host-product-primary-fg: var(--color-brand-accent-fg);
  --host-product-primary-on-dark: var(--color-brand-accent-on-dark-surface);
  --host-product-primary-on-dark-hover: var(--color-brand-accent-on-dark-surface-hover);
  --host-product-page-bg: var(--color-slate-100);
  --host-product-card-bg: #ffffff;
  --host-product-card-border: var(--color-slate-200);
  --host-product-card-radius: 0.75rem;
  --host-product-text: var(--color-slate-900);
  --host-product-text-secondary: var(--color-slate-600);
  --host-product-text-muted: var(--color-slate-500);

  /* Status Colors — AA white-on-fill and body text on white (≥4.5:1) */
  --color-success-green: #047857;
  --color-success-green-hover: #065f46;
  --color-error-red: #dc2626;
  --color-warning-yellow: #b45309;
  --color-info-cyan: #0e7490;

  /* Slate Scale - Professional Neutrals */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Gray Scale (Legacy - prefer slate scale for new designs) */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /*
   * Dark mode — warm zinc/stone ladder (canvas → overlay).
   * --color-dark-bg-secondary remains a legacy alias for the raised tier (elevated cards / focus wash).
   */
  --color-dark-bg: #0c0a09;
  --color-dark-fill-subtle: #141414;
  --color-dark-surface: #171717;
  --color-dark-surface-raised: #262626;
  --color-dark-surface-overlay: #2f2f2f;
  --color-dark-bg-secondary: var(--color-dark-surface-raised);
  --color-dark-border: #3f3f46;
  --color-dark-border-strong: #52525b;
  --color-dark-border-subtle: rgb(255 255 255 / 10%);
  --color-dark-text: #fafaf9;
  --color-dark-text-muted: #e7e5e4;
  --color-dark-text-secondary: #a8a29e;

  /* Required Label Colors */
  --color-required-bg-light: #dbeafe;
  --color-required-text-light: #FFFFFF;
  --color-required-bg-dark: rgb(59 130 246 / 15%);
  --color-required-text-dark: #FFFFFF;

  /* ===== SPACING & SIZING ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-base: 1rem;
  --spacing-md: 1rem;   /* same as base; discover/design-tokens.css uses 0.75rem for its scale */
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Hub pages (My Bookings, My Listings): readable column on desktop; mobile stays full width */
  --swiftspot-hub-page-max-width: 56rem;

  /* Host portal breadcrumb + section tabs + page headers — same column as hub body */
  --swiftspot-host-portal-chrome-max-width: var(--swiftspot-hub-page-max-width);
  --swiftspot-host-portal-chrome-padding-x: 0.75rem;

  /* Shared detail column (host view/edit/order + renter booking details/checkout) */
  --swiftspot-detail-max-width: 64rem;
  /* Alias kept for existing host CSS that still references the old token */
  --swiftspot-host-detail-max-width: var(--swiftspot-detail-max-width);

  /* Page chrome: back link + title align across hub/account pages; body width can differ below */
  --swiftspot-page-chrome-max-width: var(--swiftspot-hub-page-max-width);
  --swiftspot-page-chrome-padding-x: 1rem;
  --swiftspot-page-chrome-padding-y: 1.25rem;
  --swiftspot-page-body-narrow: 32rem;
  --swiftspot-page-body-settings: 36rem;
  --swiftspot-page-body-account: 42rem;

  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius-base: 0.5rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-full: 9999px;

  /* Semantic radius tiers */
  --radius-chip: var(--border-radius-full);
  --radius-control: var(--border-radius-base);
  --radius-card: var(--border-radius-lg);
  --radius-panel: var(--border-radius-xl);
  --radius-sheet: 1.25rem;
  --radius-modal: var(--border-radius-xl);

  /* ===== SHADOWS - Enhanced for Depth ===== */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
  --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);

  /* Semantic elevation tiers */
  --shadow-card-base: var(--shadow-card);
  --shadow-card-raised: var(--shadow-md);
  --shadow-popover: var(--shadow-xl);
  --shadow-sheet: 0 -8px 32px rgb(0 0 0 / 12%);
  --shadow-sheet-dark: 0 -8px 32px rgb(0 0 0 / 50%);
  --shadow-floating: var(--shadow-lg);

  /* ===== TYPOGRAPHY ===== */
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-caption: 0.75rem;
  --font-size-label: 0.8125rem;
  --font-size-button: 0.875rem;
  --font-size-badge: 0.75rem;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-body: 1.5;
  --line-height-reading: 1.6;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-label: 0.04em;
  --letter-spacing-kicker: 0.08em;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-smooth: 0.2s ease;

  /* ===== LEGACY ALIASES (for compatibility) ===== */
  --primary-blue: var(--color-primary-blue);
  --primary-blue-hover: var(--color-primary-blue-hover);
  --success-green: var(--color-success-green);
  --error-red: var(--color-error-red);
  --border-dark: var(--color-gray-700);

  /* ===== BACKGROUND COLORS ===== */
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-muted: #e2e8f0;

  /* ===== TEXT COLORS ===== */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  /* Hint/muted must meet AA body on white (~4.8:1); #94a3b8 was ~2.5:1 FAIL */
  --text-muted: #64748b;

  /* ===== BORDER COLORS ===== */
  --border-default: #cbd5e1;
  --border-hover: #94a3b8;
  --border-accent: #2563eb;
  --border-light: #e2e8f0;

  /*
   * Semantic UI aliases (use in CSS; map to slate/brand tokens).
   * Keeps surfaces, borders, and states consistent across host, renter, and discover.
   */
  --surface-page: var(--bg-base);
  --surface-raised: var(--bg-surface);
  --surface-subtle: var(--bg-subtle);
  --surface-muted: var(--bg-muted);
  --border-ui: var(--border-default);
  --border-ui-subtle: var(--border-light);
  --border-ui-strong: var(--border-hover);
  --text-heading: var(--text-primary);
  --text-body: var(--text-primary);
  --text-supporting: var(--text-secondary);
  --text-caption: var(--text-tertiary);
  --text-hint: var(--text-muted);
  --type-page-title-size: var(--font-size-3xl);
  --type-page-title-line-height: var(--line-height-tight);
  --type-section-title-size: var(--font-size-xl);
  --type-section-title-line-height: var(--line-height-snug);
  --type-card-title-size: var(--font-size-base);
  --type-body-size: var(--font-size-base);
  --type-body-line-height: var(--line-height-body);
  --type-muted-size: var(--font-size-sm);
  --type-caption-size: var(--font-size-caption);
  --type-label-size: var(--font-size-label);
  --type-button-size: var(--font-size-button);
  --type-badge-size: var(--font-size-badge);
  --accent-primary: var(--color-primary-blue);
  --accent-primary-hover: var(--color-primary-blue-hover);
  --state-success: var(--color-success-green);
  --state-warning: var(--color-warning-yellow);
  --state-error: var(--color-error-red);
  --state-info: var(--color-info-cyan);
  --state-success-bg: #f0fdf4;
  --state-success-border: rgb(16 185 129 / 22%);
  --state-error-bg: #fef2f2;
  --state-error-border: rgb(239 68 68 / 22%);
  --state-warning-bg: #fffbeb;
  --state-info-bg: #ecfeff;
  --state-info-border: rgb(6 182 212 / 22%);
  --state-warning-border: rgb(245 158 11 / 24%);
  --state-disabled-bg: var(--color-slate-100);
  --state-disabled-text: var(--color-slate-500);
  --focus-ring-color: rgb(59 130 246 / 10%);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-ring-strong: 0 0 0 3px rgb(59 130 246 / 20%);
  /* Used by components/forms character counter */
  --warning-orange: var(--color-warning-yellow);
  /* Vertical rhythm between major sections (pages may override when intentionally compact) */
  --section-gap-sm: var(--spacing-lg);
  --section-gap-md: var(--spacing-xl);
  --section-gap-lg: 2.5rem;

  /* ===== EFFECTS ===== */
  --glass-morphism: rgb(255 255 255 / 10%);

  /* ===== ICON SIZES ===== */
  --icon-xs: 0.75rem;
  --icon-sm: 1rem;
  --icon-base: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-2xl: 2.5rem;

  /* ===== Z-INDEX SCALE =====
   * Do not add new magic numbers — pick a var from the nearest tier.
   *
   * Tier 1 (1–110)      map, sheet, page chrome
   * Tier 2 (1000–1100)  dropdowns, modals, tooltips
   * Tier 3 (6000–10010) app overlays (admin pill, toast, support, bookings header)
   * Tier 4 (99998+)     discover stacked controls (legacy band — avoid new entries)
   * Tier 5 (999999+)    auth / high modals above discover detail
   * Escape hatch        --z-below-maximum / --z-maximum (nested menu under discover only)
   */
  --z-base: 1;
  --z-map: 1;
  --z-map-container: 2;
  /* Discover mobile: fixed map sits above base layers but below listings sheet (--z-sheet) */
  --z-discover-map-fixed: 5;
  --z-elevated: 10;
  --z-search: 10;
  --z-search-focus: 11;
  --z-header: 50;
  --z-topbar: 50;
  --z-blocker: 70;
  --z-sheet: 100;
  --z-button-elevated: 102;
  /* Discover: expanded bottom sheet (spot details) above top bar + filter badges */
  --z-sheet-elevated: 110;
  --z-dropdown: 1000;
  --z-dropdown-menu: 1001;
  --z-modal: 1040;
  --z-overlay: 1050;
  --z-tooltip: 1060;
  --z-toast: 9999;
  --z-max: 10000;
  --z-support-chat: 10000;
  --z-my-bookings-header: 10001;
  --z-my-bookings-header-elevated: 10002;
  --z-datepicker-popover: 10010;
  /* Floating cake menu (JS may read these via getComputedStyle) */
  --z-cake-trigger: 8000;
  --z-cake-dropdown: 8001;
  /* Admin pill when main nav is hidden (e.g. discover) */
  --z-admin-indicator: 6000;
  /* Logout confirm: above discover chrome, below profile-style layers */
  --z-logout-modal: 101001;
  /* Above discover desktop spot detail (--z-high-modal); below auth / notifications */
  --z-profile-dropdown: calc(var(--z-high-modal) + 20);
  /* Cake dropdown on host/marketing shell (trigger uses --z-profile-dropdown in base.html JS) */
  --z-cake-menu-elevated-dropdown: calc(var(--z-high-modal) + 25);
  /* Discover: datetime picker above #spot-detail-view (--z-high-modal); below auth (--z-auth-modal) */
  --z-discover-datetime-backdrop: calc(var(--z-high-modal) + 4);
  --z-discover-datetime-dropdown: calc(var(--z-high-modal) + 5);
  /* Discover: Open in Maps chooser above desktop spot detail; below auth */
  --z-discover-maps-choice: calc(var(--z-high-modal) + 6);
  /* Discover: hamburger + datetime chip sit above sheet local stacks */
  --z-discover-control: 100000;
  /* Sort dropdowns (ported to body); high enough for sheet/map, avoid --z-maximum */
  --z-discover-sort-dropdown: 100006;
  --z-discover-filter-badges: 40;
  --z-my-bookings-header-mobile: 99998;
  /* Page notifications on discover (above auth modal --z-high-modal, below menus at maximum) */
  --z-discover-notification: 2000000;
  --z-high-modal: 999999;
  /* Full-page navigation spinner: above nav/toast/support chat; below auth modal */
  --z-page-loader: calc(var(--z-high-modal) + 2);
  /* Discover: search address autocomplete (body portal) above #spot-detail-view, below auth modal */
  --z-discover-address-autocomplete: calc(var(--z-high-modal) + 5);
  /* Auth shell: above discover spot detail (--z-high-modal); below forgot-password popup (+50) */
  --z-auth-modal: calc(var(--z-high-modal) + 10);
  /* Nested modal under topmost menu (e.g. commercial info under discover menu) */
  --z-below-maximum: 2147483646;
  --z-maximum: 2147483647;

  /* ===== NAVIGATION DESIGN TOKENS ===== */

  /* Floating main nav clearance (md+ pill shell + wrapper padding) */
  --app-main-nav-shell-height: 3.75rem;
  --app-main-nav-wrapper-padding-y: 1rem;
  --app-main-nav-offset: calc(var(--app-main-nav-shell-height) + var(--app-main-nav-wrapper-padding-y) + 0.75rem);
  --app-main-bottom-nav-height: 4rem;

  /* Navigation Colors */
  --nav-bg-light: #ffffff;
  --nav-bg-dark: #1f2937;
  --nav-border-light: #e5e7eb;
  --nav-border-dark: #374151;
  --nav-text-light: #4b5563;
  --nav-text-dark: #d1d5db;
  --nav-text-hover-light: #111827;
  --nav-text-hover-dark: #ffffff;
  --nav-bg-hover-light: #f9fafb;
  --nav-bg-hover-dark: #374151;

  /* Active State Colors */
  --nav-active-text-light: #2563eb;
  --nav-active-text-dark: #60a5fa;
  --nav-active-bg-light: #eff6ff;
  --nav-active-bg-dark: #1e3a8a;

  /* My Listings Colors */
  --nav-host-text-light: #16a34a;
  --nav-host-text-dark: #4ade80;
  --nav-host-text-hover-light: #15803d;
  --nav-host-text-hover-dark: #22c55e;
  --nav-host-bg-hover-light: #f0fdf4;
  --nav-host-bg-hover-dark: #14532d;
  --nav-host-active-bg-light: #dcfce7;
  --nav-host-active-bg-dark: #166534;

  /* Navigation Spacing */
  --nav-height-desktop: 4rem;
  --nav-height-mobile: 3.5rem;
  --nav-padding-x: 1rem;
  --nav-padding-x-lg: 1.5rem;
  --nav-item-padding-y: 0.5rem;
  --nav-item-padding-x: 0.75rem;
  --nav-item-gap: 1.5rem;

  /* Navigation Typography */
  --nav-font-size: 0.875rem;
  --nav-font-weight: 500;
  --nav-font-weight-active: 600;

  /* Navigation Borders & Shadows */
  --nav-border-radius: 0.375rem;
  --nav-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
  --nav-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);

  /* Layering scale — use instead of max-int z-index hacks */
  --z-base: 1;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-overlay: 1000;
  --z-tooltip: 10000;
  --z-modal: 50000;

  /* Navigation Transitions */
  --nav-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /*
   * App main nav shell — non-Discover floating pill + mobile sticky bars.
   * Warm neutral surfaces (aligned with product chrome, not Discover-only tokens).
   */
  --nav-shell-radius: 1.25rem;
  --nav-shell-blur: 18px;
  --nav-shell-surface-light: rgba(255, 255, 255, 0.96);
  --nav-shell-surface-dark: rgba(28, 25, 23, 0.94);
  --nav-shell-border-light: rgba(120, 113, 108, 0.2);
  --nav-shell-border-dark: rgba(168, 162, 158, 0.28);
  --nav-shell-shadow-light: 0 1px 2px rgba(28, 25, 23, 0.05), 0 12px 34px rgba(28, 25, 23, 0.1);
  --nav-shell-shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.22), 0 16px 40px rgba(0, 0, 0, 0.34);
  --nav-shell-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --nav-shell-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --nav-shell-link-text-light: #44403c;
  --nav-shell-link-text-dark: #e7e5e4;
  --nav-shell-link-hover-bg-light: rgba(250, 247, 242, 0.92);
  --nav-shell-link-hover-bg-dark: rgba(255, 255, 255, 0.08);
  --nav-shell-link-active-bg-light: rgba(250, 247, 242, 0.98);
  --nav-shell-link-active-text-light: #292524;
  --nav-shell-link-active-border-light: rgba(120, 113, 108, 0.22);
  --nav-shell-link-active-bg-dark: rgba(68, 64, 60, 0.72);
  --nav-shell-link-active-text-dark: #fafaf9;
  --nav-shell-link-active-border-dark: rgba(168, 162, 158, 0.28);
  --nav-mobile-bar-surface-light: rgba(255, 255, 255, 0.96);
  --nav-mobile-bar-surface-dark: rgba(28, 25, 23, 0.94);
  --nav-mobile-bar-border-light: rgba(231, 229, 228, 0.92);
  --nav-mobile-bar-border-dark: rgba(68, 64, 60, 0.72);

  /* ===== ADDITIONAL LEGACY ALIASES ===== */
  --primary-color: var(--color-primary-blue);
  --secondary-color: var(--color-primary-blue-hover);
  --success-color: var(--color-success-green);
  --error-color: var(--color-error-red);
  --warning-color: var(--color-warning-yellow);
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --border-color: #cbd5e1;
}

/* NOTE: Dark mode contrast fixes have been consolidated into themes/dark-mode.css
   to avoid duplication and potential conflicts. Do not add contrast rules here. */