/* ============================================================================
 * Muse Marbella — Luxury Buttons (design-system v1)
 * ============================================================================
 * Spec: docs/design-system.md §6 (Buttons) + §3 (Typography) + §10 (Motion)
 *
 * - .btn-luxury-primary    — gold solid CTA (booking/contact/lead)
 * - .btn-luxury-secondary  — outline on dark backgrounds
 * - .btn-luxury-ghost      — text-only gold link-button
 *
 * Backfill (override existing legacy classes site-wide so we don't have to
 * edit every template manually):
 *   .button-find-yours  → primary (used in header contact CTA)
 *   .button-1           → primary (generic)
 *   .button-grey-1      → primary (search bar submit)
 *
 * Design rules (from §1 Anti-patterns):
 *   - No gradients, no drop shadows on text/buttons
 *   - border-radius ≤ 4px on buttons
 *   - Hover lift max 1px on buttons (cards lift 2px)
 *   - Animation duration ≤ 600ms for UI (200ms for hover/focus)
 *
 * Tokens:
 *   --gold       #c9a961    primary bg
 *   --gold-soft  #d4b876    hover bg
 *   --ink-bg     #0a0a0a    text on gold
 *   --paper      #f5f0e6    text on dark / outline color
 *   --paper-muted #a0a0a0   disabled state text
 * ============================================================================ */

:root {
    --muse-gold: #c9a961;
    --muse-gold-soft: #d4b876;
    --muse-ink: #0a0a0a;
    --muse-paper: #f5f0e6;
    --muse-paper-muted: #a0a0a0;
    --muse-ease: cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* ── Base button mixin ─────────────────────────────────────────────────── */
.btn-luxury-primary,
.btn-luxury-secondary,
.btn-luxury-ghost,
.button-find-yours,
.button-1,
.button-grey-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px; /* §12 SEO/a11y: ≥44×44 tap target */
    padding: 16px 32px;
    border-radius: 2px; /* spec: ≤4px */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 200ms var(--muse-ease),
                color 200ms var(--muse-ease),
                border-color 200ms var(--muse-ease),
                transform 200ms var(--muse-ease);
    box-shadow: none; /* §1 Anti-pattern: no drop shadows */
    background-image: none; /* kill any inherited Bootstrap gradients */
    -webkit-appearance: none;
    appearance: none;
}

/* ── Primary (gold) — also applies to legacy classes ──────────────────── */
.btn-luxury-primary,
.button-find-yours,
.button-1,
.button-grey-1 {
    background: var(--muse-gold);
    color: var(--muse-ink);
    border-color: var(--muse-gold);
}

.btn-luxury-primary:hover,
.btn-luxury-primary:focus,
.button-find-yours:hover,
.button-find-yours:focus,
.button-1:hover,
.button-1:focus,
.button-grey-1:hover,
.button-grey-1:focus {
    background: var(--muse-gold-soft);
    border-color: var(--muse-gold-soft);
    color: var(--muse-ink);
    transform: translateY(-1px); /* spec: lift 1px */
    text-decoration: none;
}

.btn-luxury-primary:active,
.button-find-yours:active,
.button-1:active,
.button-grey-1:active {
    transform: translateY(0);
}

/* ── Secondary (transparent + paper border) ───────────────────────────── */
.btn-luxury-secondary {
    background: transparent;
    color: var(--muse-paper);
    border-color: var(--muse-paper);
}

.btn-luxury-secondary:hover,
.btn-luxury-secondary:focus {
    background: var(--muse-paper);
    color: var(--muse-ink);
    border-color: var(--muse-paper);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-luxury-secondary:active {
    transform: translateY(0);
}

/* ── Ghost (text-only gold) ───────────────────────────────────────────── */
.btn-luxury-ghost {
    background: transparent;
    color: var(--muse-gold);
    border-color: transparent;
    padding: 12px 16px;
    min-height: 44px;
}

.btn-luxury-ghost:hover,
.btn-luxury-ghost:focus {
    color: var(--muse-gold-soft);
    background: rgba(201, 169, 97, 0.06);
    text-decoration: none;
}

/* ── Focus ring (a11y: visible + high-contrast) ───────────────────────── */
.btn-luxury-primary:focus-visible,
.btn-luxury-secondary:focus-visible,
.btn-luxury-ghost:focus-visible,
.button-find-yours:focus-visible,
.button-1:focus-visible,
.button-grey-1:focus-visible {
    outline: 2px solid var(--muse-gold);
    outline-offset: 3px;
}

/* ── Disabled ─────────────────────────────────────────────────────────── */
.btn-luxury-primary[disabled],
.btn-luxury-secondary[disabled],
.btn-luxury-ghost[disabled],
.button-find-yours[disabled],
.button-1[disabled],
.button-grey-1[disabled],
.btn-luxury-primary.is-disabled,
.btn-luxury-secondary.is-disabled,
.btn-luxury-ghost.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Loading state (inline spinner) ───────────────────────────────────── */
.btn-luxury-primary.is-loading,
.btn-luxury-secondary.is-loading,
.btn-luxury-ghost.is-loading,
.button-find-yours.is-loading,
.button-1.is-loading,
.button-grey-1.is-loading {
    pointer-events: none;
    opacity: 0.85;
    color: transparent !important;
    position: relative;
}

.btn-luxury-primary.is-loading::after,
.btn-luxury-secondary.is-loading::after,
.btn-luxury-ghost.is-loading::after,
.button-find-yours.is-loading::after,
.button-1.is-loading::after,
.button-grey-1.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-color: var(--muse-ink) transparent var(--muse-ink) transparent;
    border-radius: 50%;
    animation: muse-btn-spin 600ms linear infinite;
}

.btn-luxury-secondary.is-loading::after,
.btn-luxury-ghost.is-loading::after {
    border-color: var(--muse-paper) transparent var(--muse-paper) transparent;
}

@keyframes muse-btn-spin {
    to { transform: rotate(360deg); }
}

/* ── Reduced-motion respect (§10) ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn-luxury-primary,
    .btn-luxury-secondary,
    .btn-luxury-ghost,
    .button-find-yours,
    .button-1,
    .button-grey-1 {
        transition: none;
    }
    .btn-luxury-primary:hover,
    .btn-luxury-secondary:hover,
    .btn-luxury-ghost:hover,
    .button-find-yours:hover,
    .button-1:hover,
    .button-grey-1:hover {
        transform: none;
    }
    .btn-luxury-primary.is-loading::after,
    .btn-luxury-secondary.is-loading::after,
    .btn-luxury-ghost.is-loading::after,
    .button-find-yours.is-loading::after,
    .button-1.is-loading::after,
    .button-grey-1.is-loading::after {
        animation: none;
    }
}

/* ── Mobile: keep tap targets large enough ───────────────────────────── */
@media (max-width: 780px) {
    .btn-luxury-primary,
    .btn-luxury-secondary,
    .button-find-yours,
    .button-1,
    .button-grey-1 {
        padding: 14px 24px;
        font-size: 12px;
        min-height: 48px;
    }
}

/* ============================================================================
 * Typography fixes (finding §9 — all-caps H2/section labels need ≥1.5px
 * letter-spacing per design-system §3)
 * ============================================================================ */
h2.uppercase,
h2.text-uppercase,
.section-title-uppercase,
.section-eyebrow,
.muse-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 500;
}

/* Generic backstop: any element rendered uppercase via class should have
   sufficient letter-spacing — apply minimum if author hasn't set one. */
.text-uppercase,
[class*="-uppercase"] {
    letter-spacing: 0.05em; /* ≈ 1.5-2px depending on font-size */
}

/* Section eyebrows (gold micro-label above H2 — §6 Section headers) */
.muse-eyebrow {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--muse-gold);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    line-height: 1.4;
    display: inline-block;
    margin-bottom: 12px;
}

/* ============================================================================
 * END buttons-luxury.css — v1.0 — 2026-05-14
 * ============================================================================ */