/* ============================================================================
   PM-SHARED-STYLES · DESIGN TOKENS — theme: avada-redesign
   ============================================================================
   How this works (cascading system, reusable across sites):

     PRIMITIVES  (the brand: edit these per site)
       → DERIVED  (computed from primitives — never edit per site)
         → LEGACY PLUGIN BRIDGE  (re-maps the property_management plugin's own
           CSS variables to these tokens, so plugin components re-theme too)

   Re-skinning a new site = copy this file, edit ONLY the "EDIT THESE" block.
   ============================================================================ */

:root {
  /* ══════════════════════ EDIT THESE — per-site brand ══════════════════════ */

  /* Brand colors.
     brand      = the main action color: buttons, links, accents, active states.
     brand-ink  = near-black used for headings and dark bands.
     accent     = soft highlight (eyebrows, italic hero words, small flourishes).
     text-on-brand = text color placed on top of the brand color. */
  --pm-brand: #ea552a;

  /* Channel triplet for the same brand colour. core/base.css needs alpha
     variants (tints, borders, shadows) and CSS cannot apply alpha to a hex
     token inline, so those rules consume rgb(var(--pm-brand-rgb), <a>).
     Keep this in sync with --pm-brand above. */
  --pm-brand-rgb: 234, 85, 42;
  /* Interactive/button colour. Defaults to brand so this theme is unchanged;
     a theme can point it elsewhere (stay-lbj-theme uses ink) to stop red from
     doing double duty as both the accent and the button colour. */
  --pm-action: var(--pm-brand);
  --pm-brand-ink: #0a0a0a;
  --pm-accent: #f0905e;
  --pm-text-on-brand: #fff;

  /* Neutral ramp — white to near-black. Text, borders and backgrounds are all
     derived from this ramp below, so tuning it re-tones the whole site. */
  --pm-neutral-0: #fff;
  --pm-neutral-50: #f4f6f6;
  --pm-neutral-100: #e7eaea;
  --pm-neutral-200: #d0d6d6;
  --pm-neutral-400: #9aa0a6;
  --pm-neutral-500: #6b7280;
  --pm-neutral-700: #333;
  --pm-neutral-800: #2d2d2d;
  --pm-neutral-900: #072629;

  /* State / accent colors (badges, ratings, alerts). */
  --pm-success: #1a6b47;
  --pm-warning: #b45309;
  --pm-danger: #c0392b;
  --pm-info: #2563eb;
  --pm-star: #f59e0b;

  /* rating stars */
  --pm-navy: #1a3a5c;

  /* deep-blue badges */

  /* Section & Hero Padding */
  --section-padding-y: 32px;
  --section-padding-x: 15px;
  --hero-padding-y: 72px;
  --hero-padding-x: 15px;

  /* Typography. */
  --pm-font-heading: 'Montserrat', system-ui, sans-serif;
  --pm-font-body: 'Montserrat', system-ui, sans-serif;
  --pm-font-size-base: 16px;
  --pm-font-size-xs: 12px;
  --pm-font-size-sm: 14px;
  --pm-font-size-lg: 18px;
  --pm-font-size-xl: 20px;
  --pm-font-size-xxl: 24px;
  --pm-font-size-xxxl: 32px;
  --pm-tracking-wide: 0.08em;

  /* letter-spacing for uppercase eyebrows/labels */

  /* Spacing — one base step; the scale is derived from it below. */
  --pm-space: 16px;

  /* Corner radius scale. */
  --pm-radius-xs: 2px;
  --pm-radius-sm: 5px;
  --pm-radius-md: 8px;
  --pm-radius-lg: 12px;
  --pm-radius-xl: 16px;
  --pm-radius-pill: 999px;

  /* Shadows / elevation. */
  --pm-shadow-sm: rgb(0, 0, 0, 0.07) 0 1px 8px 0;
  --pm-shadow-md: rgb(0, 0, 0, 0.18) 0 4px 12px 0;
  --pm-shadow-lg: 0 12px 48px rgb(0, 0, 0, 0.14), 0 4px 16px rgb(0, 0, 0, 0.07);
  --pm-shadow-card: 0 4px 24px rgb(0, 0, 0, 0.09), 0 1px 6px rgb(0, 0, 0, 0.05);

  /* Motion. */
  --pm-duration: 0.15s;
  --pm-duration-slow: 0.3s;
  --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index ladder (keeps the sticky header above page content). */
  --pm-z-base: 1;
  --pm-z-header: 1000;
  --pm-z-dropdown: 1100;
  --pm-z-overlay: 1200;
  --pm-z-modal: 1300;
  --pm-z-lightbox: 1400;

  /* Layout: height of the sticky header in its COMPACT (scrolled) state.
     Used as `top:` for anything sticky that sits under the header.
     Per-breakpoint values are set in the media queries at the bottom. */
  --pm-header-offset: 48px;

  /* ═════════════════ DON'T TOUCH — derived automatically ═════════════════ */

  /* Brand variants. */
  --pm-brand-hover: color-mix(in oklab, var(--pm-brand) 85%, black);
  --pm-brand-tint: color-mix(in srgb, var(--pm-brand) 10%, white);
  --pm-brand-soft: color-mix(in srgb, var(--pm-brand) 30%, white);
  --pm-brand-glow: color-mix(in srgb, var(--pm-brand) 25%, transparent);
  --pm-action-hover: color-mix(in oklab, var(--pm-action) 85%, black);
  --pm-action-glow: color-mix(in srgb, var(--pm-action) 25%, transparent);
  --pm-action-tint: color-mix(in srgb, var(--pm-action) 10%, white);
  --pm-success-tint: color-mix(in srgb, var(--pm-success) 10%, white);
  --pm-ink-soft: color-mix(in srgb, var(--pm-brand-ink) 55%, var(--pm-neutral-500));

  /* Surfaces & borders. */
  --pm-surface: var(--pm-neutral-0);
  --pm-surface-alt: var(--pm-neutral-50);
  --pm-surface-dark: #1e1e1e;

  /* dark CTA bands */
  --pm-surface-darker: #0f110f;

  /* footer */
  --pm-border: var(--pm-neutral-100);
  --pm-border-strong: var(--pm-neutral-200);

  /* Text roles. */
  --pm-heading: var(--pm-brand-ink);
  --pm-text: var(--pm-neutral-700);
  --pm-text-muted: var(--pm-neutral-500);
  --pm-text-subtle: var(--pm-neutral-400);
  --pm-link: var(--pm-brand);
  --pm-link-hover: var(--pm-brand-hover);

  /* Spacing scale (from the base step). */
  --pm-space-xs: calc(var(--pm-space) * 0.25);

  /* 4px  */
  --pm-space-sm: calc(var(--pm-space) * 0.5);

  /* 8px  */
  --pm-space-lg: calc(var(--pm-space) * 1.5);

  /* 24px */
  --pm-space-xl: calc(var(--pm-space) * 2);

  /* 32px */
  --pm-space-2xl: calc(var(--pm-space) * 3);

  /* 48px */

  /* ════════ LEGACY PLUGIN BRIDGE — property_management re-theming ════════
     The plugin ships its own :root variables (awayday-variables.css and the
     scoped --filter-* / --sf-* sets). This file loads AFTER the plugin's CSS,
     so re-defining them here re-themes every plugin component (property cards,
     filters, booking widget, search form) without touching the plugin.
     Colors only — structural vars (radii, font stacks the plugin inherits)
     are left alone on purpose. */

  /* Primary action color everywhere the plugin uses its blue (#009DD6):
     buttons, active states, date-picker icons, steppers, SVG icons. */
  --primary: var(--pm-brand);
  --primary-bg: var(--pm-brand);
  --primary-active-bg: var(--pm-brand);
  --btn-stepper: var(--pm-brand);
  --svg-icon-color: var(--pm-brand);
  --primary-bg-text-color: var(--pm-text-on-brand);
  --btn-stepper-text-color: var(--pm-text-on-brand);
  --danger: var(--pm-danger);

  /* Plugin default text (#002756 navy) + secondary surfaces. */
  --default-text-color: var(--pm-text);
  --heading-text-color: var(--pm-heading);
  --secondary-bg: var(--pm-border-strong);
  --search-single-version-form-btn-txt: var(--pm-heading);

  /* Promo tag on property cards (adopted stray — was defined ad-hoc). */
  --promo-tag-bg: var(--pm-brand);
  --promo-tag-color: var(--pm-text-on-brand);

  /* Property card v2. */
  --card-v2-border: var(--pm-border);
  --card-v2-shadow: var(--pm-shadow-card);
  --card-v2-badge-text: var(--pm-text-on-brand);
  --card-v2-badge-feat-bg: var(--pm-brand);
  --card-v2-badge-verify-bg: var(--pm-success);
  --card-v2-badge-near-bg: var(--pm-warning);
  --card-v2-badge-quiet-bg: var(--pm-neutral-700);
  --card-v2-location-text: var(--pm-text-muted);
  --card-v2-heading-text: var(--pm-heading);
  --card-v2-body-text: var(--pm-text);
  --card-v2-pill-bg: var(--pm-surface-alt);
  --card-v2-row-bg: var(--pm-surface-alt);
  --card-v2-muted-border: var(--pm-border-strong);
  --card-v2-accent-border: var(--pm-brand-soft);

  /* Search/filters bar (property-filters/styles.css). */
  --filter-border-color: var(--pm-border-strong);
  --filter-gray-color: var(--pm-text-muted);
  --filter-light-color: var(--pm-border-strong);
  --filter-text-gray-color: var(--pm-text-muted);
  --filter-bg-mobile-dates: var(--pm-surface-alt);

  /* Search form v2 (--sf-*). Colors only; radii left to the plugin. */
  --sf-border: var(--pm-border);
  --sf-divider: var(--pm-border);
  --sf-label: var(--pm-text-subtle);
  --sf-subtext: var(--pm-text-muted);
  --sf-subtext-strong: var(--pm-text-muted);
  --sf-accent-glow: var(--pm-brand-glow);
  --sf-radius-btn: var(--pm-radius-md);
  --sf-card-radius: var(--pm-radius-lg);
  --sf-muted-action: color-mix(in srgb, var(--pm-heading) 25%, transparent);
  --sf-popup-shadow: var(--pm-shadow-lg);
}

/* Sticky-header height per breakpoint (Elementor: tablet ≤1024, mobile ≤767). */
@media (max-width: 1024px) {
  :root {
    --pm-header-offset: 59px;
  }
}

@media (max-width: 767px) {
  :root {
    --pm-header-offset: 87px;
    --section-padding-y: 52px;
    --hero-padding-y: 52px;
  }
}

/* Tiny background helpers kept for compiled-page markup compatibility. */
.bg-white {
  background-color: var(--pm-surface) !important;
}

.bg-light {
  background-color: var(--pm-surface-alt) !important;
}

.bg-stone {
  background-color: var(--pm-border) !important;
}