/* ==========================================================================
   QUEEN OF CLEAN LONDON — HAUTE COUTURE CLINICAL DESIGN SYSTEM
   ========================================================================== */

:root,
[data-theme="couture-rose"] {
    /* Primary Brand Tokens — Couture Rose & Champagne on Clinical Alabaster */
    --bg-primary: #FAF8F6;
    --bg-surface: #FFFFFF;
    --bg-soft: #F9EFF2;
    --bg-soft-alt: #F4EAE6;
    --bg-dark: #161215;
    --bg-dark-elevated: #221B20;

    --text-main: #181216;
    --text-secondary: #5C4E56;
    --text-muted: #8C7A84;
    --text-on-dark: #FAF8F6;

    --accent-primary: #C25975;       /* Couture Velvet Rose */
    --accent-primary-hover: #A84460;
    --accent-light: #E8B4C2;         /* Soft Rose Quartz */
    --accent-subtle: rgba(194, 89, 117, 0.10);
    --accent-border: rgba(194, 89, 117, 0.20);
    --accent-glow: rgba(194, 89, 117, 0.28);

    --gold: #C8A464;                 /* Brushed Champagne Gold */
    --gold-light: #E5CFA3;
    --gold-subtle: rgba(200, 164, 100, 0.14);

    --clinical-green: #1E7E5C;
}

[data-theme="harley-emerald"] {
    /* Alternative Palette 2 — Harley Street Emerald & Brushed Brass */
    --bg-primary: #F8FAF9;
    --bg-surface: #FFFFFF;
    --bg-soft: #EEF4F1;
    --bg-soft-alt: #E6EFEA;
    --bg-dark: #0E1F1A;
    --bg-dark-elevated: #162E26;

    --text-main: #0F1E19;
    --text-secondary: #435850;
    --text-muted: #70867E;
    --text-on-dark: #F8FAF9;

    --accent-primary: #1B5E49;       /* Harley Street Emerald */
    --accent-primary-hover: #134636;
    --accent-light: #88C4B0;
    --accent-subtle: rgba(27, 94, 73, 0.10);
    --accent-border: rgba(27, 94, 73, 0.20);
    --accent-glow: rgba(27, 94, 73, 0.25);

    --gold: #C69F59;
    --gold-light: #E2C691;
    --gold-subtle: rgba(198, 159, 89, 0.14);

    --clinical-green: #1B5E49;
}

[data-theme="royal-berry"] {
    /* Alternative Palette 3 — Rich Royal Berry & Rose Gold */
    --bg-primary: #FFF9FB;
    --bg-surface: #FFFFFF;
    --bg-soft: #FCEBF1;
    --bg-soft-alt: #F7DFEA;
    --bg-dark: #3B0A24;
    --bg-dark-elevated: #521033;

    --text-main: #2A0719;
    --text-secondary: #683A52;
    --text-muted: #966880;
    --text-on-dark: #FFF9FB;

    --accent-primary: #D62868;       /* Royal Berry Pink */
    --accent-primary-hover: #B51D55;
    --accent-light: #FF94B8;
    --accent-subtle: rgba(214, 40, 104, 0.10);
    --accent-border: rgba(214, 40, 104, 0.22);
    --accent-glow: rgba(214, 40, 104, 0.32);

    --gold: #D4AF37;
    --gold-light: #F1D779;
    --gold-subtle: rgba(212, 175, 55, 0.15);

    --clinical-green: #1E7E5C;
}

/* ==========================================================================
   BASE & TYPOGRAPHY
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    font-family: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-main);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-serif-luxury {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* Semantic Color Utility Classes bound to CSS Variables */
.bg-theme-primary { background-color: var(--bg-primary); }
.bg-theme-surface { background-color: var(--bg-surface); }
.bg-theme-soft { background-color: var(--bg-soft); }
.bg-theme-dark { background-color: var(--bg-dark); }
.bg-theme-dark-elevated { background-color: var(--bg-dark-elevated); }
.bg-theme-accent { background-color: var(--accent-primary); }
.bg-theme-accent-subtle { background-color: var(--accent-subtle); }
.bg-theme-gold { background-color: var(--gold); }
.bg-theme-gold-subtle { background-color: var(--gold-subtle); }

.text-theme-main { color: var(--text-main); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted); }
.text-theme-accent { color: var(--accent-primary); }
.text-theme-accent-light { color: var(--accent-light); }
.text-theme-gold { color: var(--gold); }
.text-theme-gold-light { color: var(--gold-light); }

.border-theme-accent { border-color: var(--accent-border); }
.border-theme-gold { border-color: rgba(200, 164, 100, 0.3); }

/* ==========================================================================
   GLASSMORPHISM & ELEVATION
   ========================================================================== */

.glass-nav {
    background: rgba(250, 248, 246, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--accent-border);
}

.glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--accent-border);
    box-shadow: 0 20px 45px -15px rgba(24, 18, 22, 0.06);
}

.glass-dark-card {
    background: rgba(34, 27, 32, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   BUTTONS & MICRO-INTERACTIONS
   ========================================================================== */

.btn-luxury-primary {
    background-color: var(--accent-primary);
    color: #FFFFFF;
    border: 1px solid var(--accent-primary);
    box-shadow: 0 10px 25px -5px var(--accent-glow);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.btn-luxury-primary:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -6px var(--accent-glow);
}

.btn-luxury-dark {
    background-color: var(--bg-dark);
    color: #FFFFFF;
    border: 1px solid var(--bg-dark);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-luxury-dark:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -6px var(--accent-glow);
}

.btn-luxury-outline {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--accent-border);
    transition: all 0.3s ease;
}

.btn-luxury-outline:hover {
    border-color: var(--accent-primary);
    background-color: var(--accent-subtle);
    color: var(--accent-primary);
    transform: translateY(-2px);
}

/* ==========================================================================
   ANIMATIONS & SCROLL REVEAL
   ========================================================================== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.animate-fade-in {
    opacity: 0;
}

.animate-fade-in.active {
    animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.float-badge {
    animation: floatSlow 5s ease-in-out infinite;
}

/* ==========================================================================
   INTERACTIVE QUOTE CALCULATOR CONTROLS
   ========================================================================== */

.calc-pill {
    border: 1.5px solid rgba(24, 18, 22, 0.1);
    background: var(--bg-surface);
    color: var(--text-secondary);
    transition: all 0.25s ease;
    cursor: pointer;
}

.calc-pill:hover {
    border-color: var(--accent-primary);
    background: var(--bg-soft);
}

.calc-pill.selected {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -4px var(--accent-glow);
}

.calc-addon {
    border: 1.5px solid rgba(24, 18, 22, 0.08);
    background: var(--bg-surface);
    transition: all 0.25s ease;
    cursor: pointer;
}

.calc-addon:hover {
    border-color: var(--accent-border);
    transform: translateY(-2px);
}

.calc-addon.selected {
    border-color: var(--accent-primary);
    background: var(--bg-soft);
    box-shadow: 0 6px 16px -4px var(--accent-glow);
}

/* Custom Range Slider */
input[type="range"].luxury-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-soft);
    border-radius: 999px;
    outline: none;
    border: 1px solid var(--accent-border);
}

input[type="range"].luxury-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 12px var(--accent-glow);
    cursor: pointer;
    transition: transform 0.2s ease;
}

input[type="range"].luxury-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* ==========================================================================
   PROTOCOL CHECKLIST TABS
   ========================================================================== */

.protocol-tab {
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    transition: all 0.25s ease;
}

.protocol-tab:hover {
    color: var(--text-main);
}

.protocol-tab.active {
    border-bottom-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 700;
}

/* ==========================================================================
   ONBOARDING MODAL & STEPPER
   ========================================================================== */

#quote-modal {
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#quote-modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.progress-step {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1.5px solid var(--accent-border);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.progress-step.active {
    background: var(--accent-primary);
    color: #FFFFFF;
    border-color: var(--accent-primary);
    box-shadow: 0 6px 16px var(--accent-glow);
    transform: scale(1.08);
}

.progress-step.completed {
    background: var(--bg-dark);
    color: #FFFFFF;
    border-color: var(--bg-dark);
}

.progress-line {
    flex: 1;
    height: 2px;
    background: var(--bg-soft);
    margin: 0 12px;
    transition: background 0.3s ease;
}

.progress-line.filled {
    background: var(--accent-primary);
}

.onboarding-step {
    display: none;
}

.onboarding-step.active {
    display: block;
    animation: fadeUp 0.4s ease forwards;
}

.service-option {
    border: 1.5px solid rgba(24, 18, 22, 0.08);
    background: var(--bg-primary);
    transition: all 0.25s ease;
}

.service-option:hover {
    border-color: var(--accent-border);
    background: var(--bg-soft);
}

.service-option.active {
    border-color: var(--accent-primary);
    background: var(--bg-surface);
    box-shadow: 0 10px 25px -5px var(--accent-glow);
}

/* Theme Swatch Selector */
.theme-swatch-btn {
    transition: all 0.25s ease;
}
.theme-swatch-btn.active {
    background: var(--bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-weight: 700;
    color: var(--text-main);
}