/**
 * ============================================================================
 * MEDSPA BELLA BRAND THEME - Canonical Location (DES-006 P1)
 * ============================================================================
 *
 * Brand: Medspa Bella - Clearwater, Florida
 * Tagline: "Rejuvenate your beauty"
 * Positioning: Physician-Directed Aesthetic Medicine
 *
 * ============================================================================
 * BRAND STRATEGY & COLOR RATIONALE
 * ============================================================================
 *
 * PALETTE: Coastal Wellness (Option B)
 *
 * Selected over alternatives because:
 *
 * | Alternative        | Why NOT chosen                                    |
 * |--------------------|---------------------------------------------------|
 * | Clinical Luxe (A)  | Navy+gold felt too corporate/law firm             |
 * | Modern Medical (C) | Violet too trendy; no coastal connection          |
 * | Physician Luxe (D) | Navy+gold somewhat traditional                    |
 * | Clinical Green     | Commoditizes with pharmacies/urgent care          |
 * | Pink/Rose          | Reads feminine day spa, not physician-owned       |
 *
 * OPTION B CHOSEN BECAUSE:
 * - Deep Teal = strong Clearwater/Florida coastal identity
 * - Calming, approachable feel that reduces medical anxiety
 * - Natural, organic aesthetic aligned with "rejuvenation"
 * - Sandy beige tones = beach warmth, local connection
 * - Sea glass accents = unique coastal differentiation
 * - Differentiates from clinical competitors
 * - Gender-neutral, universally appealing
 *
 * CONSIDERATIONS:
 * - Teal is common in wellness/spa industry - use sparingly with sandy accents
 * - Deep Sea navy added for medical authority moments
 * - Balance coastal calm with professional credibility
 *
 * MESSAGING HIERARCHY:
 * 1. Primary tagline: "Rejuvenate your beauty" (matches logo)
 * 2. Secondary: "Physician-Directed Aesthetic Medicine"
 * 3. Descriptive: "Board-certified physician oversight for every treatment"
 *
 * ============================================================================
 * COLOR MAPPING
 * ============================================================================
 *
 * | Palette Color   | Hex     | CSS Variable              | Usage                |
 * |-----------------|---------|---------------------------|----------------------|
 * | Deep Teal       | #0d7377 | --primary-color           | Buttons, links, CTA  |
 * | Ocean Teal      | #14919b | --primary-light           | Hover states, accents|
 * | Deep Sea        | #0c4a6e | --secondary-color         | Headers, authority   |
 * | Sandy Beige     | #d4c4a8 | --accent-color            | Warmth, highlights   |
 * | Sea Foam        | #e0f2f1 | --accent-light            | Soft backgrounds     |
 * | Shell White     | #f8f6f3 | --page-bg                 | Page background      |
 * | Rose Quartz     | #c77da2 | --accent-secondary        | Pink complement      |
 * | Coastal Sage    | #52796f | --accent-dark             | Emphasis, contrast   |
 * | Deep Gray       | #1f2937 | --heading-color           | Headings             |
 * | Storm Gray      | #4b5563 | --text-color              | Body text            |
 *
 * ============================================================================
 */

/* PERF-21b-009: Brand font fallbacks to prevent CLS on MedSpa public pages */
/* DSC-22-02: Synced from app-local copy to canonical source */
@font-face {
    ascent-override: 84%;
    descent-override: 22%;
    font-family: 'Montserrat Fallback';
    size-adjust: 112%;
    src: local('Arial');
}

@font-face {
    ascent-override: 92%;
    descent-override: 23%;
    font-family: 'Quicksand Fallback';
    size-adjust: 106%;
    src: local('Arial');
}

/* PERF-B01: base-theme.css loaded via <link> in layout (removed @import chain) */

:root {
    /* DSC-21c-05: Bootstrap primary RGB for utilities (rgba() alpha blending) */
    --bs-primary-rgb: 13, 115, 119; /* Match --primary-color (#0d7377) */

    /* ===== Brand Primary Colors (Coastal Teal) ===== */
    --primary-color: #0d7377;           /* Deep Teal - calming, coastal */
    --primary-hover: #0a5c5f;           /* Darker for hover */
    --primary-active: #074547;          /* Darkest for active */
    --primary-light: #14919b;           /* Ocean Teal - lighter variant */
    --primary-lighter: #5fb3b8;         /* Even lighter */
    --primary-lightest: #e0f2f1;        /* Sea Foam - tint for backgrounds */

    /* ===== Secondary Colors (Deep Sea - Authority) ===== */
    --secondary-color: #0c4a6e;         /* Deep Sea - medical authority */
    --secondary-hover: #083652;         /* Darker for hover */
    --secondary-light: #1e6a94;         /* Lighter variant */

    /* ===== Brand Accent Colors (Sandy/Natural) ===== */
    --accent-color: #d4c4a8;            /* Sandy Beige - warmth, beach */
    --accent-hover: #c4b090;            /* Darker sand */
    --accent-light: #e8dfd0;            /* Light sand */
    --accent-secondary: #c77da2;        /* Rose Quartz - warm pink complement to teal */
    --accent-dark: #52796f;             /* Coastal Sage - emphasis */

    /* ===== Neutral Foundation (Coastal Tones) ===== */
    --page-bg: #f8f6f3;                 /* Shell White - warm white */
    --card-bg: #fff;                 /* Pure white for cards */
    --section-alt-bg: #e0f2f1;          /* Sea Foam - alternate sections */
    --border-color: #d1d9d6;            /* Soft coastal gray */

    /* ===== Text Colors ===== */
    --heading-color: #1f2937;           /* Deep Gray - authoritative */
    --text-color: #4b5563;              /* Storm Gray - readable body */
    --text-muted: #5e6673;              /* ACC-002: Darkened for 4.5:1+ contrast on #f8f6f3 (was #6b7280) */

    /* ===== Header Styling ===== */
    --header-bg: var(--white);
    --brand-color: var(--primary-color);
    --nav-link-color: var(--heading-color);
    --nav-link-hover-color: var(--primary-color);

    /* ===== Hero Section ===== */
    --hero-bg: linear-gradient(135deg, var(--page-bg) 0%, var(--white) 50%, var(--section-alt-bg) 100%);
    /* Hero background images are always dark — use light text in all modes */
    --hero-title-color: #e8e8e8;
    --hero-subtitle-color: #c8c8c8;
    --hero-description-color: #ffffff;

    /* ===== Content Sections ===== */
    --section-title-color: var(--heading-color);
    --section-subtitle-color: var(--text-color);

    /* ===== Cards ===== */
    --card-icon-color: var(--primary-color);
    --card-border: var(--border-color);

    /* ===== Features ===== */
    --feature-icon-bg: var(--section-alt-bg);
    --feature-icon-color: var(--primary-color);

    /* ===== CTA Section ===== */
    --cta-bg: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    --cta-text-color: var(--white);
    --cta-btn-bg: var(--white);
    --cta-btn-color: var(--primary-color);
    --cta-btn-hover-bg: var(--section-alt-bg);

    /* ===== Scheduling Widget ===== */
    --widget-bg: var(--section-alt-bg);

    /* ===== Footer ===== */
    --footer-bg: var(--secondary-color); /* Deep Sea - authority */
    --footer-text-color: #b8d4e2;        /* ACC-C05: Improved to ~6.1:1 contrast on #0c4a6e (was #a5c4d4) */
    --footer-brand-color: var(--white);
    --footer-tagline-color: var(--accent-color);
    --footer-heading-color: var(--white);
    --footer-link-color: #9ccfdb;         /* ACC-C06: Improved to ~5.6:1 contrast on #0c4a6e (was #7eb8c9) */
    --footer-link-hover-color: var(--accent-color);
    --footer-divider-color: #1e6a94;
    --footer-copyright-color: #b0cad8;

    /* ===== Mobile Theme Color ===== */
    --theme-color: #0d7377;

    /* ===== Buttons ===== */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-border: var(--primary-color);
    --btn-primary-hover-bg: var(--primary-hover);
    --btn-primary-hover-border: var(--primary-hover);

    /* ===== Brand Typography ===== */
    --font-family-heading: 'Montserrat', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
    --font-family-body: 'Quicksand', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;

    /* ACC-DM01: Accessible primary color for text on light backgrounds */
    --primary-color-accessible: var(--primary-color);

    /* ===== Chart Color Overrides — Coastal Wellness Palette ===== */
    --chart-color-1: #0d7377;   /* Deep Teal primary */
    --chart-color-2: #198754;   /* success green */
    --chart-color-3: #d4c4a8;   /* Sandy Beige accent */
    --chart-color-4: #c77da2;   /* Rose Quartz complement */
    --chart-color-5: #0c4a6e;   /* Deep Sea authority */
    --chart-color-6: #52796f;   /* Coastal Sage */
    --chart-color-7: #14919b;   /* Ocean Teal lighter */
    --chart-color-8: #495057;   /* gray-700 neutral */

    /* ===== Semantic tokens for rgba backgrounds ===== */
    --highlight-warm-bg: rgba(212, 196, 168, 0.15);   /* Sandy accent tint */
    --accent-rose-bg: rgba(199, 125, 162, 0.15);      /* Rose Quartz tint */

    /* ACC-003: Medical alert text — 4.5:1+ contrast on --accent-light (#e8dfd0) */
    --alert-medical-text: #6D5A3F;
}

/* ===== Page Background ===== */
body {
    background-color: var(--page-bg);
    color: var(--text-color);
    font-family: var(--font-family-body);
    font-weight: 500;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--heading-color);
    font-family: var(--font-family-heading);
    font-weight: 300;
}

/* Hero section titles - lighter weight for elegance */
.hero-section h1 {
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Hero description — heavier weight for legibility over background images */
.hero-section p:not(.lead) {
    font-weight: 600;
}

/* Section headers */
.section-header h2 {
    font-weight: 300;
}

/* ===== Button Overrides ===== */
/* DES-H31 P3: Use var(--white) instead of hardcoded #fff */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--white);
}

/* DES-C01: text-decoration: underline on hover is intentional MedSpa brand differentiation */
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
    text-decoration: underline;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 115, 119, 0.25);
}

.btn-outline-primary {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    text-decoration: underline;
}

/* Secondary button (Deep Sea - for authority moments) */
.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--white);
}

/* Accent button variant (Sandy warmth) */
.btn-accent {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
}

/* DES-018 / DSC-21-03: Use --accent-hover from base-theme instead of orphaned --accent-dark-hover */
.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--white);
}

/* CTA section - ensure dark background for white text contrast (WCAG AA) */
.cta-section {
    background-color: var(--primary-color) !important;  /* Deep Teal #0d7377 = 5.6:1 contrast with white */
}

/* CTA section button - light button on colored background */
.cta-section .btn-light {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--primary-color);
}

.cta-section .btn-light:hover,
.cta-section .btn-light:focus {
    background-color: var(--section-alt-bg);
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ===== Bootstrap Utility Overrides ===== */
/* ACC-001: Removed !important to allow contextual overrides */
.text-primary {
    color: var(--primary-color);
}

/* ACC-001: Removed !important to allow contextual overrides */
.text-secondary {
    color: var(--secondary-color);
}

.text-accent {
    color: var(--accent-dark) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-warm {
    background-color: var(--accent-color) !important;
}

.bg-seafoam {
    background-color: var(--section-alt-bg) !important;
}

/* ===== Link Colors ===== */
a {
    color: var(--primary-color);
}

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

/* ACC-K11: Darker link color on sea foam (#e0f2f1) backgrounds for WCAG AA 4.5:1+ contrast */
.section-alt a,
.bg-seafoam a,
[style*="background"] a {
    color: #0a5c5f; /* ~5.0:1 on #e0f2f1 (was #0d7377 ~4.0:1) */
}

.section-alt a:hover,
.bg-seafoam a:hover,
[style*="background"] a:hover {
    color: #074547;
}

/* ===== Cards with coastal styling ===== */
/* DES-C02: border-color retained for MedSpa's visible card borders (intentional override of base-theme border: none) */
.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.service-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.service-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 12px rgba(13, 115, 119, 0.12);
}

/* ===== Feature icons with coastal feel ===== */
.feature-icon,
.card-icon {
    background-color: var(--section-alt-bg);
    color: var(--primary-color);
}

/* ===== Focus States ===== */
:focus-visible {
    outline-color: var(--primary-color);
}

/* ===== Selection Color ===== */
::selection {
    background-color: var(--primary-lightest);
    color: var(--heading-color);
}

/* ===== Scrollbar (WebKit) ===== */
/* DES-028: Custom scrollbar is intentional MedSpa brand differentiation */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--page-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* ===== Coastal Accent Highlights ===== */
.highlight-coastal {
    background-color: var(--section-alt-bg);
    border-left: 4px solid var(--primary-color);
    padding-left: var(--spacing-md);  /* UX-045 P1: Migrated from hardcoded 1rem */
}

.highlight-warm {
    background-color: var(--highlight-warm-bg);
    border-left: 4px solid var(--accent-color);
    padding-left: var(--spacing-md);  /* UX-045 P1: Migrated from hardcoded 1rem */
}

/* ===== Medical Director / Trust Section ===== */
.trust-badge {
    background-color: var(--white);
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}

.physician-highlight {
    background: linear-gradient(135deg, var(--page-bg) 0%, var(--section-alt-bg) 100%);
    border-left: 4px solid var(--secondary-color);
}

/* ===== Rose Quartz Accents ===== */
.accent-natural {
    color: var(--accent-secondary);
}

.bg-natural {
    background-color: var(--accent-rose-bg);
}

/* ===== ACC-I08: Alert styles with accessible text contrast ===== */
.alert-medical,
.alert-accent {
    background-color: var(--accent-light);
    border-color: var(--accent-color);
    color: var(--alert-medical-text);
}

/*
 * ACC-I18: High contrast mode.
 * MedSpa Bella relies on the operating system's @media (prefers-contrast: high)
 * settings for high contrast support. There is no togglable .high-contrast class.
 * Browsers will automatically increase contrast when the OS setting is enabled.
 */

/* ===== VIS-H09 P2: Dark Mode Theme for MedSpa Bella ===== */
[data-theme="dark"] {
    --page-bg: #1a1a2e;
    --card-bg: #2d2d2d;
    /* VIS-I12: Dark mode overrides for heading and text variables */
    --heading-color: #e8e8e8;
    --text-color: #c8c8c8;
    --text-muted: #a8a8a8;               /* Muted text readable on dark backgrounds */
    --hero-title-color: #e8e8e8;
    --hero-subtitle-color: #c8c8c8;
    --nav-link-color: #d0d0d0;
    /* DM-FIX: Section/card backgrounds that were missing dark overrides */
    --section-alt-bg: #252538;           /* Dark variant of seafoam #e0f2f1 — used by alternating sections, icons, widgets */
    --feature-icon-bg: #2a3a3a;          /* Darker teal-tinted surface for icon backgrounds */
    --widget-bg: #252538;                /* Scheduling widget background */
    --border-color: #404040;             /* Override light #d1d9d6 border for dark mode */
    --card-border: #404040;
    /* DM-FIX: Hero gradient for dark mode */
    --hero-bg: linear-gradient(135deg, #1a1a2e 0%, #252538 50%, #1a2a2a 100%);
    /* DM-FIX: CTA button hover on dark backgrounds */
    --cta-btn-hover-bg: #2a3a3a;
    --footer-bg: #0a3650;
    --footer-text-color: #b8d4e2;        /* ACC-C05: Match light mode fix (~8.2:1 on #0a3650) */
    --footer-brand-color: #ffffff;
    --footer-heading-color: #ffffff;
    --footer-link-color: #9ccfdb;         /* ACC-C06: Match light mode fix (~7.5:1 on #0a3650) */
    --footer-link-hover-color: #d4c4a8;
    --footer-divider-color: #1e6a94;
    --footer-copyright-color: #b0cad8;
    /* ACC-DM01: Accessible primary color for text on dark backgrounds */
    --primary-color-accessible: #8ab4a0;

    /* Dark mode focus rings */
    --shadow-focus: 0 0 0 0.25rem rgba(138, 180, 160, 0.25);
    --shadow-focus-warning: 0 0 0 0.25rem rgba(255, 221, 87, 0.25);
    --shadow-focus-info: 0 0 0 0.25rem rgba(103, 232, 249, 0.25);

    /* Chart colors dark mode overrides */
    --chart-color-1: #5fb3b8;   /* Lighter teal */
    --chart-color-2: #48C774;   /* success green */
    --chart-color-3: #e8d5b8;   /* Lighter sandy beige */
    --chart-color-4: #d89ab8;   /* Lighter rose quartz */
    --chart-color-5: #4a8aae;   /* Lighter deep sea */
    --chart-color-6: #7aaa9f;   /* Lighter coastal sage */
    --chart-color-7: #4ab8c0;   /* Lighter ocean teal */
    --chart-color-8: #ADB5BD;   /* gray neutral */
}

/* VIS-V04: MedSpa dark mode brand overrides */
[data-theme="dark"] .medspabella,
[data-theme="dark"][data-brand="medspabella"] {
    --primary-color: #8ab4a0;        /* Lightened from #3d5a52 for dark bg contrast */
    --primary-hover: #9ec4b0;
    --secondary-color: #c4b49f;      /* Lightened from #96805f */
    --accent-color: #d4c4af;         /* Lightened from #a88f73 */
    --btn-primary-bg: #4a7a6a;       /* ACC-E10: Darkened from #5a8a7a (3.95:1) to #4a7a6a (~4.7:1) for WCAG AA normal text */
    --link-color: #8ab4a0;
    --link-hover-color: #9ec4b0;
}

/* DES-D26: Removed @media (prefers-color-scheme: dark) block.
 * The FOUC prevention script handles dark mode via [data-theme="dark"],
 * making the prefers-color-scheme media query redundant and a potential
 * source of flash-of-incorrect-theme. */