/*
Theme Name: Lumina Salon
Theme URI: https://luminasalon.com
Author: WooSalonPro
Author URI: https://woosalonpro.com
Description: A premium beauty salon WordPress theme — modern, bright, and luxurious. Orange-centered brand palette with warm cream accents.
Version: 20.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumina-salon
Tags: beauty, salon, spa, booking, woocommerce, elementor, full-width-template, custom-colors, custom-menu, featured-images, footer-widgets, sticky-post, threaded-comments
*/

/* ================================================================
   LUMINA SALON — DESIGN SYSTEM v12
   Bright. Modern. Luxurious.
   Orange (#ff6b1a) primary · Cream (#fff8f0) base · Gold accents
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,400;1,700&display=swap');

/* CRITICAL: preloader uses light cream with orange — load before any other CSS */
#ls-preloader {
    position: fixed !important;
    inset: 0 !important;
    background: #fff8f0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

/* ──────────────────────────────────────────────────
   DESIGN TOKENS (CSS custom properties)
   ────────────────────────────────────────────────── */
:root {
    /* ─── Brand: Orange + Cream + Gold ─── */
    --ls-primary:        #ff6b1a;
    --ls-primary-dark:   #ea580c;
    --ls-primary-light:  #fff0e6;
    --ls-primary-pale:   #fff8f0;

    --ls-gold:           #c9a84c;
    --ls-gold-light:     #e8c97a;
    --ls-gold-pale:      #f5e8c4;

    /* ─── Surfaces ─── */
    --ls-white:          #ffffff;
    --ls-bg:             #ffffff;
    --ls-bg-alt:         #fff8f0;
    --ls-cream:          #fff8f0;
    --ls-surface:        #fafafa;
    --ls-surface-2:      #f5f5f5;

    /* ─── Text ─── */
    --ls-text:           #1a1a1a;
    --ls-text-body:      #2d2d2d;
    --ls-text-muted:     #6b7280;
    --ls-text-light:     #9ca3af;

    /* ─── Borders & Dividers ─── */
    --ls-border:         #e5e7eb;
    --ls-border-light:   #f3f4f6;
    --ls-divider:        #e5e7eb;

    /* ─── Success / Error ─── */
    --ls-success:        #16a34a;
    --ls-success-light:  #dcfce7;
    --ls-error:          #dc2626;
    --ls-error-light:    #fee2e2;

    /* ─── Legacy aliases kept for compatibility ─── */
    --ls-black:          #1a1a1a;
    --ls-dark:           #1a1a1a;
    --ls-dark-2:         #2d2d2d;
    --ls-dark-3:         #374151;
    --ls-text-dark:      #1a1a1a;
    --ls-rose:           #ff6b1a;
    --ls-rose-light:     #ff8c47;
    --ls-rose-pale:      #fff0e6;
    --ls-border-dark:    #d1d5db;

    /* ─── Gradients ─── */
    --ls-grad-primary:   linear-gradient(135deg, #ff6b1a 0%, #ff8c47 100%);
    --ls-grad-gold:      linear-gradient(135deg, #c9a84c 0%, #e8c97a 50%, #c9a84c 100%);
    --ls-grad-dark:      linear-gradient(160deg, #ffffff 0%, #fff8f0 50%, #fff0e6 100%);
    --ls-grad-hero:      linear-gradient(160deg, #fff8f0 0%, #ffffff 40%, #fff0e6 100%);
    --ls-grad-rose:      linear-gradient(135deg, #ff6b1a 0%, #ff8c47 100%);
    --ls-grad-warm:      linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);

    /* ─── Typography ─── */
    --ls-font-display:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --ls-font-heading:   'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --ls-font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ─── Spacing ─── */
    --ls-gap-xs:         8px;
    --ls-gap-sm:         16px;
    --ls-gap-md:         24px;
    --ls-gap-lg:         40px;
    --ls-gap-xl:         64px;
    --ls-gap-2xl:        96px;
    --ls-gap-3xl:        128px;

    /* ─── Layout ─── */
    --ls-container:      1280px;
    --ls-container-wide: 1440px;
    --ls-header-h:       80px;
    --ls-header-h-mob:   64px;

    /* ─── Radii & Shadows ─── */
    --ls-radius-sm:      8px;
    --ls-radius:         12px;
    --ls-radius-lg:      20px;
    --ls-radius-xl:      28px;
    --ls-radius-pill:    100px;
    --ls-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --ls-shadow:         0 4px 20px rgba(0,0,0,.06);
    --ls-shadow-lg:      0 16px 48px rgba(0,0,0,.08);
    --ls-shadow-orange:  0 8px 24px rgba(255,107,26,.25);

    /* ─── Transitions ─── */
    --ls-ease:           cubic-bezier(.22,.61,.36,1);
    --ls-transition:     200ms var(--ls-ease);
}

/* ──────────────────────────────────────────────────
   GLOBAL RESET
   ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--ls-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ls-text);
    background: var(--ls-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Update the theme-color meta to match new palette */
a { color: var(--ls-primary); text-decoration: none; transition: color var(--ls-transition); }
a:hover { color: var(--ls-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ls-font-heading);
    color: var(--ls-text);
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 800;
}

p { margin: 0 0 1em; }

button { font-family: inherit; cursor: pointer; }

/* ──────────────────────────────────────────────────
   LAYOUT PRIMITIVES
   ────────────────────────────────────────────────── */
.ls-container {
    width: 100%;
    max-width: var(--ls-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    position: relative;
    z-index: 2;
}
.ls-container--wide { max-width: var(--ls-container-wide); }
.ls-container--narrow { max-width: 720px; }

.ls-section { padding: clamp(48px, 8vw, 96px) 0; position: relative; }
.ls-section--tight { padding: clamp(32px, 5vw, 64px) 0; }

/* ──────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────── */
.ls-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px;
    border: none; border-radius: var(--ls-radius-pill);
    font-family: var(--ls-font-body); font-size: .9rem;
    font-weight: 700; letter-spacing: .02em;
    cursor: pointer; text-decoration: none;
    transition: all var(--ls-transition);
    white-space: nowrap;
}
.ls-btn--primary,
.ls-btn--gold {
    background: var(--ls-primary);
    color: var(--ls-white);
    box-shadow: var(--ls-shadow-orange);
}
.ls-btn--primary:hover,
.ls-btn--gold:hover {
    background: var(--ls-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255,107,26,.4);
    color: var(--ls-white);
}
.ls-btn--dark {
    background: var(--ls-text);
    color: var(--ls-white);
}
.ls-btn--dark:hover {
    background: var(--ls-primary);
    color: var(--ls-white);
    transform: translateY(-2px);
}
.ls-btn--outline {
    background: transparent;
    color: var(--ls-text);
    border: 2px solid var(--ls-text);
}
.ls-btn--outline:hover {
    background: var(--ls-text);
    color: var(--ls-white);
}
.ls-btn--lg { padding: 16px 36px; font-size: .95rem; }
.ls-btn--sm { padding: 10px 20px; font-size: .85rem; }

.ls-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ls-primary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 16px;
}