/* ==========================================================================
   TGL Design System — Single Source of Truth
   Three-layer token architecture: Primitive → Semantic → Component
   ========================================================================== */

/* ==========================================================================
   LAYER 1 — PRIMITIVE TOKENS
   Raw values. No semantic meaning. Never use directly in components.
   ========================================================================== */
:root {

    /* ── Primitive Colors ── */
    --tgl-primitive-teal-400:   #31b8c6;
    --tgl-primitive-teal-600:   #1fa3a3;
    --tgl-primitive-teal-50:    #e8f8f8;
    --tgl-primitive-orange-400: #F28f52;
    --tgl-primitive-orange-600: #d5702a;
    --tgl-primitive-gold-500:   #c5a55a;
    --tgl-primitive-navy-900:   #1a1a2e;
    --tgl-primitive-gray-800:   #2f3744;
    --tgl-primitive-gray-100:   #f3f4f6;
    --tgl-primitive-gray-50:    #f5f5f5;
    --tgl-primitive-gray-200:   #eeeeee;
    --tgl-primitive-gray-300:   #dddddd;
    --tgl-primitive-gray-400:   #cccccc;
    --tgl-primitive-gray-500:   #888888;
    --tgl-primitive-gray-600:   #666666;
    --tgl-primitive-gray-700:   #444444;
    --tgl-primitive-gray-900:   #222222;
    --tgl-primitive-white:      #ffffff;

    /* ── Primitive Spacing (rem base: 1rem = 16px) ── */
    --tgl-primitive-space-1:  0.25rem;  /* 4px  */
    --tgl-primitive-space-2:  0.5rem;   /* 8px  */
    --tgl-primitive-space-3:  0.75rem;  /* 12px */
    --tgl-primitive-space-4:  1rem;     /* 16px */
    --tgl-primitive-space-5:  1.25rem;  /* 20px */
    --tgl-primitive-space-6:  1.5rem;   /* 24px */
    --tgl-primitive-space-8:  2rem;     /* 32px */
    --tgl-primitive-space-10: 2.5rem;   /* 40px */
    --tgl-primitive-space-12: 3rem;     /* 48px */

    /* ── Primitive Font Sizes (rem) ── */
    --tgl-primitive-text-xs:   0.6875rem; /* 11px */
    --tgl-primitive-text-sm:   0.8125rem; /* 13px */
    --tgl-primitive-text-base: 0.875rem;  /* 14px */
    --tgl-primitive-text-md:   1rem;      /* 16px */
    --tgl-primitive-text-lg:   1.25rem;   /* 20px */
    --tgl-primitive-text-xl:   1.375rem;  /* 22px */
    --tgl-primitive-text-2xl:  1.5rem;    /* 24px */

    /* ── Primitive Radii (px) ── */
    --tgl-primitive-radius-sm:   4px;
    --tgl-primitive-radius-md:   8px;
    --tgl-primitive-radius-lg:   12px;
    --tgl-primitive-radius-xl:   16px;
    --tgl-primitive-radius-full: 9999px;

    /* ── Primitive Shadows (px) ── */
    --tgl-primitive-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
    --tgl-primitive-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --tgl-primitive-shadow-md: 0 2px 16px rgba(0, 0, 0, 0.08);
    --tgl-primitive-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.12);
    --tgl-primitive-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);
    --tgl-primitive-shadow-2xl: 0 30px 70px rgba(0, 0, 0, 0.25);

    /* ── Primitive Transitions ── */
    --tgl-primitive-duration-fast:   0.15s;
    --tgl-primitive-duration-normal: 0.2s;
    --tgl-primitive-duration-slow:   0.3s;
    --tgl-primitive-easing:          ease;
    --tgl-primitive-easing-out:      ease-out;

    /* ── Primitive Z-Index ── */
    --tgl-primitive-z-1:     1;
    --tgl-primitive-z-100:   100;
    --tgl-primitive-z-9998:  9998;
    --tgl-primitive-z-9999:  9999;
    --tgl-primitive-z-10000: 10000;

    /* ── Primitive Layout ── */
    --tgl-primitive-header-height:        6.25rem;  /* 100px */
    --tgl-primitive-header-height-mobile: 5rem;     /* 80px  */
    --tgl-primitive-max-width:            87.5rem;  /* 1400px */
}


/* ==========================================================================
   LAYER 2 — SEMANTIC TOKENS
   Purpose-based aliases that map to primitives.
   These are the tokens components should consume.
   ========================================================================== */
:root {

    /* ── Brand Colors ── */
    --tgl-teal:         var(--tgl-primitive-teal-400);
    --tgl-teal-dark:    var(--tgl-primitive-teal-600);
    --tgl-teal-light:   var(--tgl-primitive-teal-50);
    --tgl-orange:       var(--tgl-primitive-orange-400);
    --tgl-orange-dark:  var(--tgl-primitive-orange-600);
    --tgl-gold:         var(--tgl-primitive-gold-500);
    --tgl-dark:         var(--tgl-primitive-navy-900);

    /* ── Text Colors ── */
    --tgl-text-primary:   var(--tgl-primitive-gray-900);
    --tgl-text-secondary: var(--tgl-primitive-gray-600);
    --tgl-text-muted:     var(--tgl-primitive-gray-500);
    --tgl-text-light:     var(--tgl-primitive-gray-500);
    --tgl-text-inverse:   var(--tgl-primitive-white);

    /* ── Background Colors ── */
    --tgl-bg-primary:   var(--tgl-primitive-white);
    --tgl-bg-secondary: var(--tgl-primitive-gray-50);
    --tgl-bg-subtle:    var(--tgl-primitive-gray-100);

    /* ── Border Colors ── */
    --tgl-border-light:  var(--tgl-primitive-gray-200);
    --tgl-border-medium: var(--tgl-primitive-gray-300);
    --tgl-border-dark:   var(--tgl-primitive-gray-400);

    /* ── Spacing ── */
    --tgl-space-1: var(--tgl-primitive-space-1);
    --tgl-space-2: var(--tgl-primitive-space-2);
    --tgl-space-3: var(--tgl-primitive-space-3);
    --tgl-space-4: var(--tgl-primitive-space-4);
    --tgl-space-5: var(--tgl-primitive-space-5);
    --tgl-space-6: var(--tgl-primitive-space-6);
    --tgl-space-8: var(--tgl-primitive-space-8);

    /* ── Typography ── */
    --tgl-font-family:   'Mulish', system-ui, -apple-system, sans-serif;
    --tgl-font-size-xs:   var(--tgl-primitive-text-xs);
    --tgl-font-size-sm:   var(--tgl-primitive-text-sm);
    --tgl-font-size-base: var(--tgl-primitive-text-base);
    --tgl-font-size-md:   var(--tgl-primitive-text-md);
    --tgl-font-size-lg:   var(--tgl-primitive-text-lg);
    --tgl-font-size-xl:   var(--tgl-primitive-text-xl);
    --tgl-font-size-2xl:  var(--tgl-primitive-text-2xl);

    /* ── Border Radius ── */
    --tgl-radius-sm:   var(--tgl-primitive-radius-sm);
    --tgl-radius-md:   var(--tgl-primitive-radius-md);
    --tgl-radius-lg:   var(--tgl-primitive-radius-lg);
    --tgl-radius-full: var(--tgl-primitive-radius-full);

    /* ── Shadows ── */
    --tgl-shadow-sm:  var(--tgl-primitive-shadow-xs);
    --tgl-shadow-md:  var(--tgl-primitive-shadow-md);
    --tgl-shadow-lg:  var(--tgl-primitive-shadow-lg);
    --tgl-shadow-nav: var(--tgl-primitive-shadow-xl);
    --tgl-shadow-mega: var(--tgl-primitive-shadow-2xl);

    /* ── Transitions ── */
    --tgl-transition-fast:   var(--tgl-primitive-duration-fast) var(--tgl-primitive-easing);
    --tgl-transition-normal: var(--tgl-primitive-duration-normal) var(--tgl-primitive-easing);
    --tgl-transition-slow:   var(--tgl-primitive-duration-slow) var(--tgl-primitive-easing);

    /* ── Z-Index ── */
    --tgl-z-base:     var(--tgl-primitive-z-1);
    --tgl-z-sticky:   var(--tgl-primitive-z-100);
    --tgl-z-dropdown: var(--tgl-primitive-z-9998);
    --tgl-z-overlay:  var(--tgl-primitive-z-9999);
    --tgl-z-modal:    var(--tgl-primitive-z-10000);

    /* ── Layout ── */
    --tgl-header-height:        var(--tgl-primitive-header-height);
    --tgl-header-height-mobile: var(--tgl-primitive-header-height-mobile);
    --tgl-max-width:            var(--tgl-primitive-max-width);
}


/* ==========================================================================
   LAYER 3 — COMPONENT TOKENS
   Shared tokens for specific recurring components.
   Maps semantic tokens to component-scoped variables.
   ========================================================================== */
:root {

    /* ── Buttons ── */
    --tgl-btn-padding-y:    0.375rem;  /* 6px */
    --tgl-btn-padding-x:    1rem;      /* 16px */
    --tgl-btn-font-size:    0.875rem;  /* 14px */
    --tgl-btn-font-weight:  700;
    --tgl-btn-border-width: 2px;
    --tgl-btn-radius:       var(--tgl-radius-md);
    --tgl-btn-transition:   all var(--tgl-transition-normal);

    /* ── Inputs ── */
    --tgl-input-radius:       var(--tgl-radius-sm);
    --tgl-input-border-color: var(--tgl-border-medium);
    --tgl-input-focus-color:  var(--tgl-teal);
    --tgl-input-font-size:    var(--tgl-font-size-base);

    /* ── Navigation ── */
    --tgl-nav-link-font-size:   var(--tgl-font-size-md);
    --tgl-nav-link-font-weight: 700;
    --tgl-nav-link-color:       var(--tgl-dark);
    --tgl-nav-link-hover-color: var(--tgl-teal);

    /* ── Dropdown ── */
    --tgl-dropdown-shadow:    var(--tgl-shadow-nav);
    --tgl-dropdown-radius:    var(--tgl-radius-md);
    --tgl-dropdown-bg:        var(--tgl-bg-primary);
    --tgl-dropdown-min-width: 12rem;  /* 192px */

    /* ── Filter Tags ── */
    --tgl-tag-padding-y:    0.25rem;
    --tgl-tag-padding-x:    0.75rem;
    --tgl-tag-font-size:    0.75rem;
    --tgl-tag-font-weight:  600;
    --tgl-tag-radius:       var(--tgl-primitive-radius-full);
    --tgl-tag-bg:           var(--tgl-teal);
    --tgl-tag-color:        var(--tgl-text-inverse);
    --tgl-tag-active-bg:    var(--tgl-orange);

    /* ── Carousel ── */
    --tgl-carousel-arrow-size: 36px;
    --tgl-carousel-arrow-bg:   var(--tgl-bg-primary);
    --tgl-carousel-arrow-color: var(--tgl-teal);
    --tgl-carousel-arrow-border: 2px solid var(--tgl-teal);
}


/* ==========================================================================
   GLOBAL UTILITY CLASSES
   Reusable across all plugin components.
   These replace Tailwind's shared utility classes.
   ========================================================================== */

/* ── Accessibility ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Alpine.js cloak — prevent FOUC ── */
[x-cloak] {
    display: none !important;
}

/* ── Global overflow ── */
html,
body {
    overflow-x: hidden;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   SHARED BUTTON CLASSES
   Used on property pages, search results, carousels, and navigation.
   ========================================================================== */
.btn-tgl {
    display: inline-block;
    text-align: center;
    padding: var(--tgl-btn-padding-y) var(--tgl-btn-padding-x);
    border-radius: var(--tgl-btn-radius);
    border-width: var(--tgl-btn-border-width);
    border-style: solid;
    font-size: var(--tgl-btn-font-size);
    font-weight: var(--tgl-btn-font-weight);
    transition: var(--tgl-btn-transition);
    cursor: pointer;
    text-decoration: none !important;
}

/* Orange outlined */
.btn-tgl-orange {
    border-color: var(--tgl-orange);
    color: var(--tgl-orange);
    background-color: transparent;
}
.btn-tgl-orange:hover {
    background-color: var(--tgl-orange);
    color: var(--tgl-text-inverse);
}

/* Orange solid (filled by default) */
.btn-tgl-orange-solid {
    border-color: var(--tgl-orange);
    background-color: var(--tgl-orange);
    color: var(--tgl-text-inverse);
}
.btn-tgl-orange-solid:hover {
    background-color: var(--tgl-orange-dark);
    border-color: var(--tgl-orange-dark);
}

/* Teal outlined */
.btn-tgl-teal {
    border-color: var(--tgl-teal);
    color: var(--tgl-teal);
    background-color: transparent;
}
.btn-tgl-teal:hover {
    background-color: var(--tgl-teal);
    color: var(--tgl-text-inverse);
}

/* Dark outlined */
.btn-tgl-dark {
    border-color: var(--tgl-dark);
    color: var(--tgl-dark);
    background-color: transparent;
}
.btn-tgl-dark:hover {
    background-color: var(--tgl-dark);
    color: var(--tgl-text-inverse);
}

/* Ensure white text on hover for ALL button variants */
[class*="btn-tgl-"]:hover,
.btn-tgl:hover {
    color: var(--tgl-text-inverse) !important;
}


/* ==========================================================================
   SHARED COMPONENT CLASSES
   Filter tags, carousel arrows, search cards.
   ========================================================================== */

/* ── Filter Tags (search pills) ── */
.tgl-filter-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--tgl-tag-padding-y) var(--tgl-tag-padding-x);
    font-size: var(--tgl-tag-font-size);
    font-weight: var(--tgl-tag-font-weight);
    border-radius: var(--tgl-tag-radius);
    background-color: var(--tgl-tag-bg);
    color: var(--tgl-tag-color);
    border: 1px solid var(--tgl-teal);
    cursor: pointer;
    transition: all var(--tgl-transition-fast);
}
.tgl-filter-tag:hover,
.tgl-filter-tag.active {
    background-color: var(--tgl-tag-active-bg);
    border-color: var(--tgl-orange);
    color: var(--tgl-text-inverse);
}

/* ── Carousel Track ── */
.tgl-carousel-track {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 2rem;
}
.tgl-carousel-track::-webkit-scrollbar {
    display: none;
}
.tgl-carousel-track .jet-listing-grid__item,
.tgl-carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
    flex-shrink: 0;
}

/* ── Carousel Arrows ── */
.tgl-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--tgl-carousel-arrow-size);
    height: var(--tgl-carousel-arrow-size);
    border-radius: var(--tgl-primitive-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tgl-carousel-arrow-bg);
    border: var(--tgl-carousel-arrow-border);
    color: var(--tgl-carousel-arrow-color);
    box-shadow: var(--tgl-primitive-shadow-sm);
    cursor: pointer;
    transition: all var(--tgl-transition-fast);
}
.tgl-carousel-arrow:hover {
    background: var(--tgl-teal);
    color: var(--tgl-text-inverse);
}
.tgl-carousel-arrow--left  { left: 0; }
.tgl-carousel-arrow--right { right: 0; }

/* ── Search Card Hover ── */
.tgl-search-card:hover {
    transform: translateY(-2px);
    transition: transform var(--tgl-transition-normal),
                box-shadow var(--tgl-transition-normal);
}

/* ── Hide native browser search clear button ── */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}