/**
 * Practisphere Brand Theme
 *
 * Overrides CSS variables from variables.css with Practisphere semantic mappings.
 * All apps use the same 5 BCSS brand colors, themes only vary semantic mappings.
 *
 * Brand Colors (same as BCSS):
 * - #7597B3 (Primary) - buttons, links, active states
 * - #394855 (Secondary) - backgrounds, headers
 * - #9DADBC (Tertiary) - borders, muted states
 * - #A88F73 (Warm Accent) - highlights, special badges
 * - #735D43 (Dark Accent) - footer, tertiary actions
 *
 * Practisphere uses the same color mappings as BCSS.
 *
 * Used by: DES-026: Available for practisphere-app/admin (currently both use bcss-theme.css)
 *
 * SESSION-FRONTEND-QUALITY: Refactored to use base-theme.css
 * Reduced from 290 lines to ~85 lines (theme-specific + healthcare-specific only)
 */

/* 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: 74, 106, 130; /* Match --bcss-color-1-accessible (#4a6a82) */

    /* ===== Practisphere Theme Uses Default Brand Color Mappings ===== */

    /* All semantic colors inherit from variables.css defaults */

    /* DES-H12 P2: Alert accent background variable */
    --alert-accent-bg: #f5f0e8;

    /* ACC-004: Medical alert text — 4.5:1+ contrast on --alert-accent-bg (#f5f0e8) */
    --alert-medical-text: #6D5A3F;

    /* Sidebar variables inherited from base-theme.css */

    /* ===== Navigation (App Layout) ===== */
    --nav-bg: var(--bcss-color-2);           /* Secondary as nav background */
    --nav-text: var(--white);
    --nav-hover-bg: var(--bcss-color-1-accessible);
    --nav-active-bg: var(--bcss-color-1-accessible);
    --nav-active-text: var(--white);
    --nav-border: var(--secondary-hover);

    /* ===== Links ===== */
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-hover);
    --link-visited-color: var(--primary-active);

    /* ===== Focus State ===== */
    --focus-outline-color: var(--primary-color);
}

/* ===== Healthcare-Specific Button Variants ===== */
.btn-medical {
    background-color: var(--accent-dark); /* ACC-E43: Changed from --accent-color (#A88F73, 3.04:1) to --accent-dark (#735D43, 5.86:1) for WCAG AA */
    border-color: var(--accent-dark);
    color: var(--white);
}

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

/* ===== Healthcare-Specific Badge Variants ===== */
/* ACC-F01: Use --accent-dark (5.86:1 contrast) instead of --badge-highlight (3.04:1) for WCAG AA */
.badge-medical {
    background-color: var(--accent-dark);
    color: var(--white);
}

/* ===== Healthcare-Specific Alert Variants ===== */
/* DES-H12 P2: Use CSS variable for alert accent background */
.alert-medical,
.alert-accent {
    background-color: var(--alert-accent-bg);
    border-color: var(--accent-color);
    color: var(--alert-medical-text);
}

/* ===== Healthcare Card Variants ===== */
.card-practitioner {
    border-left: 4px solid var(--secondary-color);
}

/* ===== Healthcare-Specific Icons ===== */
.icon-practitioner {
    color: var(--secondary-color);
}

.icon-medical {
    color: var(--accent-color);
}

/* ===== VIS-003 P1: Dark Mode Overrides for Practisphere Components ===== */
[data-theme="dark"] {
    /* Alert variants need lighter backgrounds in dark mode */
    --alert-accent-bg: rgba(168, 143, 115, 0.15); /* Warm accent with transparency */

    /* UX-044 P1: Practisphere-specific dark mode footer colors */
    --footer-bg: var(--bg-secondary);
    --footer-text-color: var(--gray-800);
    --footer-link-color: var(--primary-lighter);
    --footer-link-hover-color: var(--primary-color);
    --footer-heading-color: var(--white);
    --footer-divider-color: var(--secondary-color);
}

[data-theme="dark"] .alert-medical,
[data-theme="dark"] .alert-accent {
    background-color: var(--alert-accent-bg);
    color: var(--accent-color); /* Accent color is already lightened in dark mode */
}