/* =============================================================================
 * SPA — DESIGN TOKENS  (spa-variables.css)
 *
 * All colour, spacing, typography, and layout tokens live here.
 * Every other CSS file consumes these custom properties — never raw values.
 * To re-brand the site, edit ONLY this file.
 *
 * Naming convention:
 *   --spa-{category}-{variant}
 * ============================================================================= */

:root {

    /* ── Colour palette ──────────────────────────────────────────────── */
    --spa-cream:       #FAF8F5;   /* Page background, section alt-bg     */
    --spa-sage:        #6B8F71;   /* Primary brand green                 */
    --spa-sage-light:  #A8C5AD;   /* Decorative accents, quote marks     */
    --spa-gold:        #C9A96E;   /* Highlight colour, dividers, CTA btn */
    --spa-gold-dark:   #b5904d;   /* Gold hover state                    */
    --spa-dark:        #2C2C2C;   /* Primary text                        */
    --spa-mid:         #6B6B6B;   /* Secondary / body text               */
    --spa-border:      #E8E4DC;   /* Dividers, table borders             */
    --spa-white:       #FFFFFF;

    /* Hero overlay */
    --spa-hero-overlay: rgba(0, 0, 0, 0.38);

    /* ── Typography ─────────────────────────────────────────────────── */
    --spa-font-serif:  Georgia, 'Times New Roman', serif;
    --spa-font-sans:   system-ui, -apple-system, sans-serif;

    --spa-text-xs:     11px;
    --spa-text-sm:     13px;
    --spa-text-base:   15px;
    --spa-text-md:     17px;
    --spa-text-lg:     22px;

    --spa-tracking-wide:  2px;
    --spa-tracking-wider: 3px;
    --spa-tracking-label: 4px;    /* Eyebrow / uppercase labels          */

    --spa-leading-body:   1.85;
    --spa-leading-tight:  1.1;

    /* ── Spacing scale ───────────────────────────────────────────────── */
    --spa-space-xs:    8px;
    --spa-space-sm:    16px;
    --spa-space-md:    24px;
    --spa-space-lg:    40px;
    --spa-space-xl:    60px;
    --spa-space-2xl:   96px;

    /* ── Layout ──────────────────────────────────────────────────────── */
    --spa-max-width:       1160px;
    --spa-max-width-narrow: 760px;
    --spa-max-width-mid:    1060px;

    /* ── Borders & shadows ───────────────────────────────────────────── */
    --spa-radius-sm:  4px;
    --spa-radius-md:  8px;
    --spa-radius-lg:  12px;
    --spa-radius-pill: 50px;

    --spa-shadow-card:     0 2px 24px rgba(0, 0, 0, 0.06);
    --spa-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --spa-shell-bg: rgba(255, 255, 255, 0.12);
    --spa-shell-border: rgba(255, 255, 255, 0.16);
    --spa-shell-shadow: 0 18px 50px rgba(12, 18, 14, 0.18);
    --spa-header-solid: rgba(255, 251, 245, 0.82);
    --spa-surface: #ffffff;
    --spa-surface-strong: #f8f4ee;
    --spa-text-inverse: #f7f3ee;

    /* ── Transitions ────────────────────────────────────────────────── */
    --spa-transition-base: 0.3s ease;
    --spa-transition-lift: transform 0.3s ease, box-shadow 0.3s ease;

    /* -- Filter / pill bar ------------------------------------------------ */
    --spa-filter-pill-bg:       var(--spa-cream);
    --spa-filter-pill-border:   var(--spa-border);
    --spa-filter-pill-active:   var(--spa-sage);
    --spa-filter-pill-color:    var(--spa-dark);
    --spa-filter-pill-active-color: var(--spa-white);
    --spa-filter-pill-radius:   var(--spa-radius-pill);

    /* -- Service row (horizontal card) ------------------------------------- */
    --spa-service-row-img-ratio: 4 / 3;
    --spa-service-row-img-width: 220px;
    --spa-price-badge-bg:       var(--spa-gold);
    --spa-price-badge-color:    var(--spa-white);
    --spa-badge-new-bg:         var(--spa-sage);
    --spa-badge-popular-bg:     var(--spa-gold);

    /* -- Booking layout --------------------------------------------------- */
    --spa-booking-sidebar-width: 340px;
    --spa-booking-step-size:     32px;
    --spa-booking-step-active:   var(--spa-sage);
    --spa-booking-step-done:     var(--spa-gold);
    --spa-booking-step-idle:     var(--spa-border);
    --spa-confirm-bg:            var(--spa-cream);

    /* -- Alias tokens (consumed by spa-booking.css) ---------------------- */
    /* Spacing aliases map to the existing scale                            */
    --spa-spacing-xs:      var(--spa-space-xs);    /* 8px  */
    --spa-spacing-sm:      var(--spa-space-sm);    /* 16px */
    --spa-spacing-md:      var(--spa-space-md);    /* 24px */
    --spa-spacing-lg:      var(--spa-space-lg);    /* 40px */
    --spa-spacing-xl:      var(--spa-space-xl);    /* 60px */
    /* Typography aliases */
    --spa-font-heading:    var(--spa-font-serif);
    --spa-font-body:       var(--spa-font-sans);
    /* Colour aliases */
    --spa-text-dark:       var(--spa-dark);
    --spa-text-muted:      var(--spa-mid);
    --spa-border-color:    var(--spa-border);
}

@media (prefers-color-scheme: dark) {
    :root {
        --spa-cream: #161914;
        --spa-sage: #89ab8f;
        --spa-sage-light: #64826a;
        --spa-gold: #d3af72;
        --spa-gold-dark: #e0bc81;
        --spa-dark: #f4efe7;
        --spa-mid: #c9c0b4;
        --spa-border: rgba(255, 255, 255, 0.12);
        --spa-white: #f7f3ee;
        --spa-hero-overlay: rgba(0, 0, 0, 0.52);
        --spa-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
        --spa-shadow-card-hover: 0 18px 46px rgba(0, 0, 0, 0.42);
        --spa-shell-bg: rgba(17, 21, 18, 0.46);
        --spa-shell-border: rgba(255, 255, 255, 0.08);
        --spa-shell-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
        --spa-header-solid: rgba(18, 22, 19, 0.82);
        --spa-surface: #1a1f1b;
        --spa-surface-strong: #111612;
        --spa-text-inverse: #f7f3ee;
        --spa-filter-pill-bg:       var(--spa-surface-strong);
        --spa-filter-pill-border:   var(--spa-border);
        --spa-confirm-bg:           var(--spa-surface-strong);
    }
}

:root[data-theme='light'] {
    --spa-cream: #faf8f5;
    --spa-sage: #6b8f71;
    --spa-sage-light: #a8c5ad;
    --spa-gold: #c9a96e;
    --spa-gold-dark: #b5904d;
    --spa-dark: #2c2c2c;
    --spa-mid: #6b6b6b;
    --spa-border: #e8e4dc;
    --spa-white: #ffffff;
    --spa-hero-overlay: rgba(0, 0, 0, 0.38);
    --spa-shadow-card: 0 2px 24px rgba(0, 0, 0, 0.06);
    --spa-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --spa-shell-bg: rgba(255, 255, 255, 0.12);
    --spa-shell-border: rgba(255, 255, 255, 0.16);
    --spa-shell-shadow: 0 18px 50px rgba(12, 18, 14, 0.18);
    --spa-header-solid: rgba(255, 251, 245, 0.82);
    --spa-surface: #ffffff;
    --spa-surface-strong: #f8f4ee;
    --spa-text-inverse: #f7f3ee;
}

:root[data-theme='dark'] {
    --spa-cream: #161914;
    --spa-sage: #89ab8f;
    --spa-sage-light: #64826a;
    --spa-gold: #d3af72;
    --spa-gold-dark: #e0bc81;
    --spa-dark: #f4efe7;
    --spa-mid: #c9c0b4;
    --spa-border: rgba(255, 255, 255, 0.12);
    --spa-white: #f7f3ee;
    --spa-hero-overlay: rgba(0, 0, 0, 0.52);
    --spa-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --spa-shadow-card-hover: 0 18px 46px rgba(0, 0, 0, 0.42);
    --spa-shell-bg: rgba(17, 21, 18, 0.46);
    --spa-shell-border: rgba(255, 255, 255, 0.08);
    --spa-shell-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
    --spa-header-solid: rgba(18, 22, 19, 0.82);
    --spa-surface: #1a1f1b;
    --spa-surface-strong: #111612;
    --spa-text-inverse: #f7f3ee;
    --spa-filter-pill-bg:       var(--spa-surface-strong);
    --spa-filter-pill-border:   var(--spa-border);
    --spa-confirm-bg:           var(--spa-surface-strong);
}


/* ── Global reset for SPA page ──────────────────────────────────────────── */
/*
 * Neutralise any Astra base-stylesheet rules that add margin, padding, or
 * max-width to body and direct children. Our custom header-spa.php /
 * footer-spa.php template parts output HTML that is a direct child of <body>,
 * so there are no Astra structural wrappers to catch these values.
 *
 * These rules are scoped to .spa-page (added to <body> via body_class() in
 * header-spa.php) so they don't affect any other WP pages.
 */
body.spa-page {
    overflow-x: hidden;  /* Prevent horizontal scroll if any element bleeds */
    margin: 0;
    padding: 0;
    background: var(--spa-surface);
    color: var(--spa-dark);
}

body.spa-page .ast-container,
body.spa-page #page,
body.spa-page #content,
body.spa-page #primary,
body.spa-page .site-content,
body.spa-page .content-area {
    /* Should not appear in our custom template, but guard against plugin injection */
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}