/**
 * Connect WordPress Plugin — Design Token Variables
 *
 * Structural CSS custom properties for the Connect vacation rental booking system.
 * Colour tokens are injected dynamically by DesignTokens (inline <style> in <head>).
 *
 * Version: 2.0.0
 * Last Updated: 2026-02-27
 */

/* ==========================================================================
   BASE TOKENS (Theme-agnostic)
   Applied to .cwp-root across all themes
   ========================================================================== */

.cwp-root {
  /* Typography — Font Families */
  --cwp-font-display: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cwp-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography — Font Sizes */
  --cwp-size-hero: 36px;        /* Property title on single page, major CTAs */
  --cwp-size-h1: 30px;          /* Section headers, page titles */
  --cwp-size-h2: 24px;          /* Subsection headers, widget titles */
  --cwp-size-h3: 20px;          /* Card titles, modal headers */
  --cwp-size-h4: 18px;          /* Small headers, label groups */
  --cwp-size-body: 16px;        /* Body text, descriptions, form inputs */
  --cwp-size-body-sm: 14px;     /* Secondary text, meta info, labels */
  --cwp-size-caption: 12px;     /* Captions, badges, tags */
  --cwp-size-micro: 11px;       /* Tiny labels, tooltips, footnotes */

  /* Typography — Font Weights */
  --cwp-weight-regular: 400;
  --cwp-weight-medium: 500;
  --cwp-weight-semibold: 600;
  --cwp-weight-bold: 700;

  /* Typography — Line Heights */
  --cwp-line-height-tight: 1.22;     /* Headings, display text */
  --cwp-line-height-normal: 1.4;     /* UI text, labels, short paragraphs */
  --cwp-line-height-relaxed: 1.6;    /* Property descriptions, long-form content */

  /* Typography — Letter Spacing */
  --cwp-letter-spacing-tight: -0.02em;    /* Large headings (hero, h1) */
  --cwp-letter-spacing-normal: 0;         /* Body text, paragraphs */
  --cwp-letter-spacing-wide: 0.04em;      /* Labels, overlines, small caps */

  /* Spacing Scale */
  --cwp-spacing-xs: 4px;      /* Tight spacing — icon gaps, border spacing */
  --cwp-spacing-sm: 8px;      /* Small spacing — label gaps, inline elements */
  --cwp-spacing-md: 16px;     /* Medium spacing — card padding, form field gaps */
  --cwp-spacing-lg: 24px;     /* Large spacing — section gaps, widget spacing */
  --cwp-spacing-xl: 32px;     /* Extra-large — major section dividers */
  --cwp-spacing-2xl: 48px;    /* 2X-large — page section spacing */
  --cwp-spacing-3xl: 64px;    /* 3X-large — hero sections, major dividers */
  --cwp-spacing-4xl: 96px;    /* 4X-large — page-level vertical rhythm */

  /* Backwards-compatible aliases (deprecated — use --cwp-spacing-*) */
  --cwp-space-xs: var(--cwp-spacing-xs);
  --cwp-space-sm: var(--cwp-spacing-sm);
  --cwp-space-md: var(--cwp-spacing-md);
  --cwp-space-lg: var(--cwp-spacing-lg);
  --cwp-space-xl: var(--cwp-spacing-xl);
  --cwp-space-2xl: var(--cwp-spacing-2xl);
  --cwp-space-3xl: var(--cwp-spacing-3xl);
  --cwp-space-4xl: var(--cwp-spacing-4xl);

  /* Border Radius Scale */
  --cwp-radius-sm: 4px;      /* Small — tags, badges, small buttons */
  --cwp-radius-md: 8px;      /* Medium — inputs, dropdowns, small cards */
  --cwp-radius-lg: 12px;     /* Large — cards, modals, feature images */
  --cwp-radius-xl: 16px;     /* Extra-large — hero images, gallery items */
  --cwp-radius-2xl: 24px;    /* 2X-large — major content blocks */
  --cwp-radius-full: 9999px; /* Pill-shaped — avatar, icon buttons */

  /* Animation — Durations */
  --cwp-duration-fast: 150ms;      /* Fast transitions — hover, focus states */
  --cwp-duration-normal: 250ms;    /* Normal transitions — dropdowns, tooltips */
  --cwp-duration-slow: 400ms;      /* Slow transitions — modals, page transitions */
  --cwp-duration-glacial: 600ms;   /* Very slow — complex animations, reveals */

  /* Animation — Easing Functions */
  --cwp-ease-default: cubic-bezier(0.4, 0, 0.2, 1);      /* Default ease-in-out */
  --cwp-ease-in: cubic-bezier(0.4, 0, 1, 1);             /* Ease-in (accelerating) */
  --cwp-ease-out: cubic-bezier(0, 0, 0.2, 1);            /* Ease-out (decelerating) */
  --cwp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Bouncy exit */
  --cwp-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring effect */

  /* Z-Index Scale */
  --cwp-z-base: 1;            /* Base layer for positioned elements */
  --cwp-z-dropdown: 1000;     /* Dropdowns, select menus */
  --cwp-z-popover: 1010;      /* Popovers, date pickers */
  --cwp-z-sticky: 1020;       /* Sticky headers, floating action buttons */
  --cwp-z-modal-backdrop: 1030; /* Backdrop overlays (behind modals) */
  --cwp-z-modal: 1040;        /* Modals, dialogs, lightboxes */
  --cwp-z-toast: 1050;        /* Toast notifications, snackbars */
  --cwp-z-tooltip: 1060;      /* Tooltips (highest layer) */

  /* Backwards-compatible alias (deprecated — use --cwp-z-modal-backdrop) */
  --cwp-z-overlay: var(--cwp-z-modal-backdrop);

  /* Container Max-Widths */
  --cwp-container-sm: 640px;
  --cwp-container-md: 768px;
  --cwp-container-lg: 1024px;
  --cwp-container-xl: 1280px;
  --cwp-container-2xl: 1536px;

  /* Focus Ring */
  --cwp-focus-ring-width: 2px;
  --cwp-focus-ring-offset: 2px;

  /* Component-Specific Tokens */

  /* Property Card */
  --cwp-card-width: 100%;
  --cwp-card-max-width: 420px;
  --cwp-card-min-height: 380px;
  --cwp-card-image-aspect: 4 / 3;
  --cwp-card-image-height: 240px;
  --cwp-card-padding: var(--cwp-space-lg);
  --cwp-card-gap: var(--cwp-space-md);
  --cwp-card-border-radius: var(--cwp-radius-xl);
  --cwp-card-border-width: 1px;

  /* Booking Sidebar */
  --cwp-booking-width: 380px;
  --cwp-booking-max-width: 100%;
  --cwp-booking-min-height: 420px;
  --cwp-booking-padding: var(--cwp-space-xl);
  --cwp-booking-gap: var(--cwp-space-lg);
  --cwp-booking-sticky-top: 24px;
  --cwp-booking-sticky-max-height: calc(100vh - 48px);
  --cwp-booking-border-radius: var(--cwp-radius-xl);
  --cwp-booking-border-width: 1px;

  /* Calendar */
  --cwp-calendar-cell-size: 48px;
  --cwp-calendar-cell-gap: 4px;
  --cwp-calendar-day-font-size: var(--cwp-size-body-sm);
  --cwp-calendar-day-weight: var(--cwp-weight-medium);
  --cwp-calendar-header-font-size: var(--cwp-size-body);
  --cwp-calendar-nav-height: 56px;
  --cwp-calendar-nav-padding: var(--cwp-space-md);
  --cwp-calendar-month-gap: var(--cwp-space-2xl);
  --cwp-calendar-border-radius: var(--cwp-radius-md);

  /* Calendar Selection Colors */
  --cwp-cal-selected: #6C4CE0;
  --cwp-cal-selected-dark: #5A3CC8;
  --cwp-cal-selected-rgb: 108, 76, 224;
  --cwp-cal-range: #EDE8FF;

  /* Search Bar */
  --cwp-search-height: 72px;
  --cwp-search-max-width: 850px;
  --cwp-search-field-padding: 16px 28px;
  --cwp-search-field-gap: var(--cwp-space-sm);
  --cwp-search-border-radius: var(--cwp-radius-full);
  --cwp-search-border-width: 0;
  --cwp-search-btn-width: auto;
  --cwp-search-btn-height: 52px;

  /* Map Pins */
  --cwp-map-pin-font-size: 13px;
  --cwp-map-pin-weight: 700;
  --cwp-map-pin-padding: 6px 10px;
  --cwp-map-pin-border-radius: 20px;
  --cwp-map-pin-border-width: 1.5px;
  --cwp-map-pin-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --cwp-map-pin-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --cwp-map-pin-shadow-active: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* Gallery Grid */
  --cwp-gallery-columns: 4;
  --cwp-gallery-gap: 14px;
  --cwp-gallery-image-aspect: 4 / 3;
  --cwp-gallery-hero-aspect: 16 / 9;
  --cwp-gallery-border-radius: var(--cwp-radius-md);
  --cwp-gallery-btn-size: 48px;
  --cwp-gallery-btn-bottom: var(--cwp-space-md);
  --cwp-gallery-btn-right: var(--cwp-space-md);

  /* Filter Pills */
  --cwp-filter-pill-height: 36px;
  --cwp-filter-pill-min-width: 80px;
  --cwp-filter-pill-padding: var(--cwp-space-sm) var(--cwp-space-md);
  --cwp-filter-pill-gap: var(--cwp-space-sm);
  --cwp-filter-pill-font-size: var(--cwp-size-body-sm);
  --cwp-filter-pill-weight: var(--cwp-weight-medium);
  --cwp-filter-pill-border-radius: var(--cwp-radius-full);
  --cwp-filter-pill-border-width: 1px;

  /* Review Rating Bars */
  --cwp-review-bar-height: 4px;
  --cwp-review-bar-width: 100%;
  --cwp-review-bar-max-width: 200px;
  --cwp-review-bar-border-radius: var(--cwp-radius-sm);
  --cwp-review-bar-delay: 200ms;

  /* Lightbox / Modal */
  --cwp-lightbox-max-width: 1200px;
  --cwp-lightbox-max-height: 90vh;
  --cwp-lightbox-padding: var(--cwp-space-2xl);
  --cwp-lightbox-border-radius: var(--cwp-radius-xl);
  --cwp-lightbox-nav-size: 56px;
  --cwp-lightbox-nav-offset: var(--cwp-space-lg);
  --cwp-lightbox-close-size: 44px;
  --cwp-lightbox-close-top: var(--cwp-space-md);
  --cwp-lightbox-close-right: var(--cwp-space-md);
  --cwp-lightbox-enter-duration: var(--cwp-duration-slow);
  --cwp-lightbox-exit-duration: var(--cwp-duration-normal);

  /* Tooltip */
  --cwp-tooltip-max-width: 240px;
  --cwp-tooltip-padding: var(--cwp-space-sm) var(--cwp-space-md);
  --cwp-tooltip-font-size: var(--cwp-size-caption);
  --cwp-tooltip-line-height: var(--cwp-line-height-normal);
  --cwp-tooltip-border-radius: var(--cwp-radius-sm);
  --cwp-tooltip-arrow-size: 6px;
  --cwp-tooltip-z: var(--cwp-z-tooltip);
  --cwp-tooltip-delay: 300ms;
  --cwp-tooltip-duration: var(--cwp-duration-fast);

  /* Notification Badge */
  --cwp-badge-height: 20px;
  --cwp-badge-min-width: 20px;
  --cwp-badge-padding: 0 6px;
  --cwp-badge-font-size: var(--cwp-size-micro);
  --cwp-badge-weight: var(--cwp-weight-semibold);
  --cwp-badge-border-radius: var(--cwp-radius-full);
  --cwp-badge-offset-top: -8px;
  --cwp-badge-offset-right: -8px;

  /* Section Card (single property page) */
  --cwp-section-padding: 24px;
  --cwp-section-radius: var(--cwp-radius-xl);
  --cwp-section-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.05);
  --cwp-section-gap: 40px;
  --cwp-section-title-gap: 24px;

  /* Action Buttons (share, save, print) */
  --cwp-action-btn-size: 40px;
  --cwp-action-btn-radius: 10px;

  /* Detail Grid Icons */
  --cwp-detail-icon-size: 52px;
  --cwp-detail-icon-radius: var(--cwp-radius-md);

  /* ── Gallery V2 ───────────────────────────────────────────────── */
  --cwp-gallery-main-width: 60%;
  --cwp-gallery-side-width: 40%;
  --cwp-gallery-row-height: 420px;
  --cwp-gallery-hover-scale: 1.03;
  --cwp-gallery-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
  --cwp-gallery-count-bg: rgba(0,0,0,0.6);
  --cwp-gallery-count-color: #FFFFFF;
  --cwp-gallery-count-font-size: var(--cwp-size-body-sm);
  --cwp-gallery-lazy-duration: var(--cwp-duration-slow);

  /* ── Booking V2 — Trust & Glass ───────────────────────────────── */
  --cwp-booking-glass-bg: rgba(255,255,255,0.85);
  --cwp-booking-glass-blur: 12px;
  --cwp-booking-glass-border: rgba(255,255,255,0.3);
  --cwp-booking-trust-icon-size: 20px;
  --cwp-booking-trust-icon-color: var(--cwp-success);
  --cwp-booking-trust-text-color: var(--cwp-text-secondary);
  --cwp-booking-mobile-bar-height: 72px;
  --cwp-booking-mobile-sheet-radius: var(--cwp-radius-2xl);
  --cwp-booking-breakdown-stagger: 60ms;

  /* ── Amenities V2 — Card Grid ─────────────────────────────────── */
  --cwp-amenity-card-padding: var(--cwp-spacing-md);
  --cwp-amenity-card-radius: var(--cwp-radius-md);
  --cwp-amenity-card-bg: var(--cwp-surface-alt);
  --cwp-amenity-card-icon-size: 28px;
  --cwp-amenity-card-icon-color: var(--cwp-primary);
  --cwp-amenity-card-hover-shadow: var(--cwp-shadow-md);
  --cwp-amenity-card-hover-translate: -2px;
  --cwp-amenity-tab-height: 36px;
  --cwp-amenity-tab-radius: var(--cwp-radius-full);
  --cwp-amenity-tab-bg: var(--cwp-surface-alt);
  --cwp-amenity-tab-active-bg: var(--cwp-primary);
  --cwp-amenity-tab-active-color: #FFFFFF;
  --cwp-amenity-search-height: 44px;
  --cwp-amenity-search-radius: var(--cwp-radius-md);

  /* ── Component Mappings (resolve via dynamic colour tokens) ──────── */
  --cwp-card-border-color: var(--cwp-border);
  --cwp-card-shadow: var(--cwp-shadow-sm);
  --cwp-card-shadow-hover: var(--cwp-shadow-md);
  --cwp-card-transition: all var(--cwp-duration-normal) var(--cwp-ease-default);

  --cwp-booking-border-color: var(--cwp-border);
  --cwp-booking-shadow: var(--cwp-shadow-lg);

  --cwp-calendar-available-bg: var(--cwp-surface);
  --cwp-calendar-booked-bg: var(--cwp-primary-light);
  --cwp-calendar-selected-bg: var(--cwp-primary);
  --cwp-calendar-hover-bg: var(--cwp-surface-alt);

  --cwp-search-shadow: var(--cwp-shadow-lg);
  --cwp-search-shadow-focus: var(--cwp-shadow-xl);

  --cwp-map-pin-transition: transform var(--cwp-duration-fast) var(--cwp-ease-spring);

  --cwp-filter-pill-bg: var(--cwp-surface);
  --cwp-filter-pill-bg-active: var(--cwp-primary);
  --cwp-filter-pill-text-active: #FFFFFF;
  --cwp-filter-pill-transition: all var(--cwp-duration-fast) var(--cwp-ease-default);

  --cwp-review-bar-bg: var(--cwp-border);
  --cwp-review-bar-fill: var(--cwp-primary);
  --cwp-review-bar-duration: var(--cwp-duration-slow);
  --cwp-review-bar-ease: var(--cwp-ease-out);

  --cwp-lightbox-overlay-bg: var(--cwp-overlay);
  --cwp-lightbox-overlay-z: var(--cwp-z-modal);

  --cwp-tooltip-bg: var(--cwp-text);
  --cwp-tooltip-text: var(--cwp-surface);
  --cwp-tooltip-shadow: var(--cwp-shadow-md);

  --cwp-badge-bg: var(--cwp-error);
  --cwp-badge-text: #FFFFFF;

  --cwp-focus-ring-color: var(--cwp-primary);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1023px) {
  .cwp-root {
    --cwp-gallery-columns: 3;
  }
}

@media (max-width: 639px) {
  .cwp-root {
    --cwp-gallery-columns: 2;
  }
}

/* ==========================================================================
   ACCESSIBILITY — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cwp-root * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
