/**
 * BookDayPass — Design System
 * Layer: token aliases + display typography + base overrides
 * Brand direction: Option B — Editorial Luxury
 *
 * Loaded BEFORE theme.css.
 * Uses --bdp-* variable names already defined in theme.css :root.
 * Adds --color-* aliases for new components (components.css).
 */

/* ==========================================================================
   Token Aliases (BOOKDAYPASS_CLAUDE.md naming → --bdp-* values)
   Components built with --color-* will automatically follow theme tokens.
   ========================================================================== */
:root {
    --color-primary:        var(--bdp-color-primary);       /* Ocean Blue     */
    --color-primary-dark:   var(--bdp-color-primary-dark);
    --color-primary-light:  var(--bdp-color-primary-light);
    --color-accent:         var(--bdp-color-primary);
    --color-accent-warm:    var(--bdp-color-secondary);     /* Sand Gold      */
    --color-accent-warm-dk: var(--bdp-color-secondary-dark);
    --color-surface:        var(--bdp-color-bg);
    --color-surface-alt:    var(--bdp-color-surface);       /* Warm off-white */
    --color-surface-dark:   var(--bdp-color-dark);          /* Deep navy      */
    --color-border:         var(--bdp-color-border);
    --color-text-primary:   var(--bdp-color-text);
    --color-text-secondary: var(--bdp-color-muted);
    --color-text-inverse:   #FFFFFF;
    --color-success:        var(--bdp-color-success);
    --color-error:          var(--bdp-color-danger);

    /* Amenity palette */
    --color-amenity-pool:   var(--bdp-color-pool);
    --color-amenity-spa:    var(--bdp-color-spa);
    --color-amenity-gym:    var(--bdp-color-gym);
    --color-amenity-beach:  var(--bdp-color-beach);
    --color-amenity-cowork: var(--bdp-color-cowork);

    /* Typography */
    --font-display: var(--bdp-font-heading);  /* Cormorant Garamond */
    --font-body:    var(--bdp-font-family);   /* Inter              */

    /* Type scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --leading-tight:  1.15;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* Spacing scale */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radius aliases */
    --radius-sm:   var(--bdp-radius-sm);
    --radius-md:   var(--bdp-radius-md);
    --radius-lg:   var(--bdp-radius-card);
    --radius-xl:   var(--bdp-radius-lg);
    --radius-full: var(--bdp-radius-pill);

    /* Shadow aliases */
    --shadow-sm:         var(--bdp-shadow-sm);
    --shadow-md:         var(--bdp-shadow-md);
    --shadow-lg:         var(--bdp-shadow-lg);
    --shadow-card-hover: var(--bdp-shadow-hover);

    /* Transition aliases */
    --transition-fast:   var(--bdp-transition-fast);
    --transition-normal: var(--bdp-transition-normal);
    --transition-slow:   var(--bdp-transition-slow);

    /* Z-index */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   var(--bdp-z-sticky);
    --z-overlay:  var(--bdp-z-overlay);
    --z-modal:    var(--bdp-z-modal);
    --z-toast:    500;
}

/* ==========================================================================
   Display Typography — Apply Cormorant Garamond to all headings
   ========================================================================== */
h1,
h2,
h3,
.bdp-hero__title,
.bdp-section__title,
.bdp-section__heading,
.bdp-venue-title,
.bdp-location-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: var(--leading-tight);
}

/* h4/h5/h6 stay Inter — they're UI labels, not editorial */
h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
}

/* ==========================================================================
   Body & Global Overrides
   ========================================================================== */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Input font size — prevents iOS zoom on focus */
input,
select,
textarea {
    font-family: var(--font-body);
    font-size: 16px;
}

/* ==========================================================================
   Glassmorphism header scroll state
   ========================================================================== */
.bdp-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom-color: var(--color-border);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.07);
}

/* ==========================================================================
   Link defaults
   ========================================================================== */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}