/* stylelint-disable bcss-tokens/no-hardcoded-color -- Brand palette definitions */
/**
 * Practisphere Brand Theme
 *
 * Overrides CSS variables from variables.css with the Practisphere brand palette.
 * Inspired by the Lobmeyr Sputnik chandelier — deep, precise, institutional.
 *
 * Brand Palette:
 * - #0C7489 (Teal)     - primary accent, CTAs, active states
 * - #0D1B2A (Midnight) - primary dark, text, nav, buttons
 * - #64748B (Slate)    - borders, metadata, secondary text
 * - #F0F4F8 (Ice)      - page backgrounds, cards
 * - #FFFFFF (White)    - reversed text, light surfaces
 */

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

:root {
    /* ===== Practisphere Brand Color Overrides ===== */
    --bcss-color-1: #0C7489;
    --bcss-color-2: #0D1B2A;
    --bcss-color-3: #64748B;
    --bcss-color-4: #0C7489;
    --bcss-color-5: #0D1B2A;
    --bcss-color-1-accessible: var(--bcss-color-2);
    --bcss-color-3-accessible: #475569;
    --bcss-color-4-accessible: #085c6e;

    /* Bootstrap primary RGB for utilities (rgba() alpha blending) */
    --bs-primary-rgb: 12, 116, 137;

    /* ===== Derived Color Overrides ===== */
    --primary-hover: #091f2e;
    --primary-active: #071923;
    --primary-light: #4da3b5;
    --primary-lighter: #8dc5d1;
    --primary-lightest: #e0f2f5;
    --secondary-hover: #162535;
    --secondary-light: #1e3448;
    --secondary-lighter: #4a6a82;
    --accent-hover: #0a6577;
    --accent-light: #e0f2f5;

    /* ===== Alert ===== */
    --alert-accent-bg: #e0f2f5;
    --alert-medical-text: #085c6e;

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

    /* ===== Footer ===== */
    --footer-divider-color: var(--secondary-hover);

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

    /* DSC-20-01: Define token referenced by practitioner-detail.css */
    --photo-placeholder-bg: rgba(255, 255, 255, 0.15);
}

/* ===== Healthcare-Specific Alert Variants ===== */
.alert-accent {
    background-color: var(--alert-accent-bg);
    border-color: var(--accent-color);
    color: var(--alert-medical-text);
}

/* ===== Dark Mode Overrides ===== */
[data-bs-theme="dark"] {
    --text-link-accessible: var(--primary-lighter);
    --alert-accent-bg: rgba(12, 116, 137, 0.15);
    --photo-placeholder-bg: rgba(255, 255, 255, 0.25);
    --footer-bg: var(--bg-secondary);
    --footer-text-color: #d0d0d0;
    --footer-link-color: var(--secondary-lighter);
    --footer-link-hover-color: var(--primary-color);
    --footer-heading-color: var(--white);
    --footer-divider-color: var(--secondary-color);
}

[data-bs-theme="dark"] .alert-accent {
    background-color: var(--alert-accent-bg);
    color: var(--accent-color);
}