/**
 * BCSS Shared UI - CSS Custom Properties
 *
 * These variables define the design system for all BCSS admin and app interfaces.
 * Product-specific theme files override these variables for branding.
 */
/* font-display: swap is handled by Google Fonts URL parameter &display=swap */

:root {
    /* ===== BCSS Brand Colors - Single Source of Truth ===== */

    /* Ordered by prominence (most used → least used) */
    --bcss-color-1: #7597B3;       /* Primary - buttons, links, active states, focus rings */
    --bcss-color-2: #394855;       /* Secondary - backgrounds, headers, dark text, secondary buttons */
    --bcss-color-3: #9DADBC;       /* Tertiary - borders, dividers, disabled states, muted text */
    --bcss-color-4: #A88F73;       /* Warm accent - highlight badges, warm alerts, accent icons, hover states */
    --bcss-color-5: #735D43;       /* Dark accent - footer accents, tertiary buttons, special borders (sparse use) */

    /* ===== WCAG AA Accessible Color Variants ===== */
    /* These colors meet 4.5:1 contrast ratio on white backgrounds */
    --bcss-color-1-accessible: #4a6a82;  /* Primary accessible - 5.5:1 contrast on white */
    --bcss-color-3-accessible: #5d6d7d;  /* Muted text accessible - 5.2:1 contrast on white */
    --bcss-color-4-accessible: #7d6a52;  /* Warm accent accessible - 5.2:1 contrast on white */

    /* ===== Semantic Color Mappings ===== */

    /* Primary Colors (override in product themes if needed) */
    --primary-color: var(--bcss-color-1-accessible);
    --primary-color-accessible: var(--bcss-color-1-accessible);  /* WCAG AA compliant for text on white */
    --primary-hover: #567a96;      /* Darker shade of primary for hover - 5.1:1 contrast on white (WCAG AA) */
    --primary-active: #567993;     /* Even darker for active states */
    --primary-light: #95afc5;      /* Lighter shade */
    --primary-lighter: #b5c7d7;    /* Even lighter */
    --primary-lightest: #e8eef3;   /* Background tint */

    /* Secondary Colors */
    --secondary-color: var(--bcss-color-2);
    --secondary-hover: #2d3a45;    /* Darker shade of secondary */
    --secondary-light: #5a6c7a;
    --secondary-lighter: #8a9aa8;

    /* Accent Colors */
    --accent-color: var(--bcss-color-4);
    --accent-hover: #96805f;       /* Darker warm accent */
    --accent-dark: var(--bcss-color-5);

    /* Border and Muted Colors */
    --border-color: var(--bcss-color-3);
    --muted-color: var(--bcss-color-3);  /* For borders/dividers - lighter */
    --muted-text-color: var(--bcss-color-3-accessible);  /* For text - WCAG AA compliant */

    /* Component-Specific Mappings */
    --btn-primary-bg: var(--bcss-color-1-accessible);
    --btn-secondary-bg: var(--bcss-color-2);
    --link-color: var(--bcss-color-1-accessible);  /* WCAG AA compliant for text on white */
    --link-hover-color: var(--primary-hover);
    --card-border: var(--bcss-color-3);
    --input-border: #8a959f;  /* ~3.1:1 on white - meets WCAG 3:1 UI component minimum. ACC-I17: Overridden globally by accessibility.css (.form-control border-color). NOTE: Verify contrast on disabled input backgrounds. */
    --input-border-disabled: var(--gray-700);  /* Darker border for disabled inputs to maintain contrast on gray backgrounds */
    --badge-highlight: var(--bcss-color-4);
    --footer-accent: var(--bcss-color-5);

    /* Accessible text colors for UI components on light backgrounds */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-link-accessible: var(--bcss-color-1-accessible);  /* 5.5:1 contrast */
    --text-primary-on-light: var(--bcss-color-1-accessible); /* For primary-colored text on white */
    --bcss-text-muted: var(--bcss-color-3-accessible);  /* Muted text - WCAG AA compliant 5.2:1 contrast */
    --text-muted-accessible: var(--bcss-color-3-accessible);  /* Alias for muted text */

    /* Semantic Colors (status/feedback) - Bootstrap 5 standard */
    --success-color: #198754;
    --success-hover: #1e7f36;  /* DES-I05: Darker success for hover states */
    --warning-hover: #e6ac00;  /* DSC-21e-01: Warning hover state (used by gradient rules) */
    --danger-hover: #bb2d3b;   /* DSC-21e-02: Danger hover state (used by 5 rules across 4 files) */
    --success-light: #d1e7dd;
    /* WARNING: --info-color (#0dcaf0) is 2.0:1 on white — FAILS WCAG AA.
       DO NOT use for text or UI icons. For text: use var(--info-text-color) or .text-info class.
       The .text-info class is overridden to #0a7c94 (4.5:1+) in accessibility.css. */
    --info-color: #0dcaf0;
    --info-light: #cff4fc;
    --warning-color: #ffc107;
    --warning-light: #fff3cd;
    --danger-color: #dc3545;
    --danger-light: #f8d7da;

    /* Bootstrap 5 Standard Colors (for test compatibility) */
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0a7c94;  /* ACC-G03: Accessible variant (4.5:1+ contrast with white text) for .bg-info components */

    /* Brand Color Aliases (for theme compatibility) */
    --brand-primary: var(--bcss-color-1);
    --brand-secondary: var(--bcss-color-2);
    --brand-accent: var(--bcss-color-4);

    /* Gradient tokens for stat cards (DES-V04) */
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

    /* ACC-H12: Safe text colors for gradient backgrounds (WCAG AA 4.5:1+) */
    --gradient-purple-text: #ffffff;   /* White on dark purple (#764ba2) - 7.2:1 contrast */
    --gradient-pink-text: #212529;     /* Dark text on light pink (#f093fb) - 6.8:1 contrast */
    --gradient-blue-text: #212529;     /* Dark text on light blue/cyan (#00f2fe) - 12.6:1 contrast */
    --gradient-green-text: #212529;    /* Dark text on light green (#38f9d7) - 11.3:1 contrast */

    /* Neutral Colors */
    --white: #fff;
    --gray-50: #f9fafb;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-850: #1e1e1e;       /* DES-I04: Between gray-800 and gray-900 */
    --gray-900: #212529;
    --black: #000;

    /* Additional Accent Colors */
    --purple-accent: #6f42c1;  /* DES-I03: Purple accent for special UI elements */

    /* ===== Chart Colors — 8-stop accessible palette (DES-CH01) ===== */
    --chart-color-1: #4A6A82;   /* BCSS steel blue */
    --chart-color-2: #198754;   /* success green */
    --chart-color-3: #FFC107;   /* warning amber */
    --chart-color-4: #DC3545;   /* danger red */
    --chart-color-5: #6F42C1;   /* purple accent */
    --chart-color-6: #0DCAF0;   /* info cyan */
    --chart-color-7: #A88F73;   /* warm accent tan */
    --chart-color-8: #495057;   /* gray-700 neutral */

    /* ===== Typography ===== */
    --font-family-sans-serif: 'Inter', 'Inter Fallback', -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --font-family-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
    --font-family-heading: var(--font-family-sans-serif);  /* DSC-22-01: Default heading font (overridden by NYCWM/MedSpa themes) */
    --font-family-body: var(--font-family-sans-serif);     /* DSC-22-01: Default body font (overridden by NYCWM/MedSpa themes) */
    /* Override Bootstrap 5 font variables so Bootstrap's own body/heading rules also use Inter */
    --bs-body-font-family: var(--font-family-sans-serif);
    --bs-headings-font-family: var(--font-family-heading);
    --font-size-base: 1rem;          /* 16px */
    --font-size-sm: 0.875rem;        /* 14px */
    --font-size-xs: 0.75rem;         /* 12px - RES-I-014/RES-008: For metadata labels only. MUST NOT be used for body text or primary content. */
    --font-size-lg: 1.125rem;        /* 18px */
    --font-size-xl: 1.25rem;         /* 20px */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --line-height-tight: 1.25;
    --line-height-loose: 1.75;

    /* ===== Spacing Scale ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* Bootstrap-compatible numeric spacing aliases (DES-V01) */
    --spacing-1: var(--spacing-xs);   /* 4px */
    --spacing-2: var(--spacing-sm);   /* 8px - DSC-015: Fixed from var(--spacing-xs) to match Bootstrap 5 spacing scale */
    --spacing-3: var(--spacing-md);   /* 16px - DSC-21e-03: Fixed collision (was var(--spacing-sm) duplicating --spacing-2) */
    --spacing-4: var(--spacing-md);   /* 16px */
    --spacing-5: var(--spacing-lg);   /* 24px */
    --spacing-6: var(--spacing-xl);   /* 32px */
    --spacing-7: var(--spacing-2xl);  /* 48px */
    --spacing-8: var(--spacing-3xl);  /* 64px */

    /* Touch Target Spacing (UX-008 - WCAG 2.5.5) */
    /* ACC-I12: Unused design tokens - retained for potential future mobile touch enhancements */
    --touch-target-x: 0.375rem;  /* 6px horizontal padding */
    --touch-target-y: 0.75rem;   /* 12px vertical padding */

    /* Overlap/Offset Spacing (UX-009) */
    --overlap-xs: -1px;      /* Minimal overlap for badges */
    --overlap-sm: -2px;      /* Small overlap */

    /* Shadow Variables for Dark Mode (UX P2) */
    --shadow-dark: 0 0.125rem 0.5rem rgba(255, 255, 255, 0.1);
    --shadow-dark-lg: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);

    /* Spacing Aliases (used by web-internal CSS) */
    --bcss-space-xs: var(--spacing-xs);
    --bcss-space-sm: var(--spacing-sm);
    --bcss-space-md: var(--spacing-md);
    --bcss-space-lg: var(--spacing-lg);
    --bcss-space-xl: var(--spacing-xl);
    --bcss-space-xxl: var(--spacing-2xl);

    /* ===== Layout Dimensions ===== */

    /* Admin Layout (Sidebar) */
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 60px;
    --sidebar-collapsed-width: 60px;  /* Alias for sidebar.css compatibility */
    --top-bar-height: 56px;  /* RES-H-002 P0: Standardized to 56px across all breakpoints (removed --top-bar-height-mobile) */
    --admin-header-height: 60px;
    --admin-footer-height: 50px;

    /* App Layout (Top Nav) */
    --app-nav-height: 64px;
    --app-footer-height: 60px;

    /* Content Width */
    --content-max-width: 1200px;
    --content-max-width-wide: 1600px;

    /* Public Layout */
    --public-header-height: 72px;  /* RES-H-017 P2: Public header height variable */

    /* ===== Borders & Radius ===== */
    --border-width: 1px;

    /* --border-color defined above in semantic mappings */
    --border-radius-sm: 0.25rem;     /* 4px */
    --border-radius: 0.5rem;            /* 8px */
    --border-radius-lg: 0.75rem;     /* 12px - matches public site card radius */
    --border-radius-xl: 1rem;        /* 16px */
    --border-radius-pill: 50rem;

    /* ===== Shadows ===== */
    --shadow-sm: 0 0.125rem 0.25rem rgb(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgb(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgb(0, 0, 0, 0.175);
    --shadow-focus: 0 0 0 0.25rem rgb(117, 151, 179, 0.25); /* BCSS primary color */
    --shadow-focus-danger: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Danger state focus */
    --shadow-focus-success: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); /* Success state focus */
    --shadow-focus-warning: 0 0 0 0.25rem rgba(255, 193, 7, 0.25); /* Warning state focus */
    --shadow-focus-info: 0 0 0 0.25rem rgba(13, 202, 240, 0.25); /* Info state focus */

    /* ===== Admin Sidebar Colors ===== */
    --sidebar-bg: var(--bcss-color-2);
    --sidebar-text: #fff;
    --sidebar-text-muted: var(--bcss-color-3-accessible);
    --sidebar-hover-bg: var(--bcss-color-1-accessible);
    --sidebar-bg-hover: var(--bcss-color-1-accessible);
    --sidebar-active-bg: var(--bcss-color-1-accessible);
    --sidebar-border: #2d3a45;
    --sidebar-submenu-active-bg: #2d3f52;  /* DES-H22 P2: Sidebar active bg (10.8:1 contrast with white) */

    /* ===== Top Bar Colors ===== */
    --top-bar-bg: var(--bcss-color-2);
    --top-bar-text: #fff;
    --top-bar-hover: var(--bcss-color-1);

    /* ===== App Navigation Colors ===== */
    --nav-bg: var(--white);
    --nav-text: var(--gray-900);
    --nav-hover-bg: var(--gray-100);
    --nav-active-bg: var(--primary-lighter);
    --nav-active-text: var(--primary-color);
    --nav-border: var(--gray-300);

    /* ===== Form Elements ===== */
    --input-bg: var(--white);

    /* --input-border defined above in semantic mappings */
    --input-focus-border: var(--primary-color);
    --input-disabled-bg: var(--gray-200);
    --input-height: 2.75rem;         /* 44px - WCAG 2.5.5 touch target */
    --input-height-sm: 2rem;         /* 32px */
    --input-height-lg: 3rem;         /* 48px */

    /* ===== Tables ===== */
    --table-header-bg: var(--gray-100);
    --table-header-text: var(--gray-900);
    --table-border: var(--gray-300);
    --table-hover-bg: var(--gray-100);
    --table-striped-bg: var(--gray-50);

    /* ===== Z-Index Scale ===== */
    --z-dropdown: 1000;
    --z-backdrop: 1010;
    --z-sidebar: 1020;
    --z-sticky: 1020;           /* VIS-I26: Intentionally shares value with --z-sidebar (both layer 1020) */
    --z-top-bar: 1030;
    --z-fixed: 1030;            /* VIS-I26: Intentionally shares value with --z-top-bar (both layer 1030) */
    --z-cookie-banner: 1035;    /* RES-I-020: Between --z-fixed (1030) and --z-modal-backdrop (1040) */
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-skip-nav: 10000;  /* Must be above all other layers for accessibility skip links */

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-instant: 0.1s ease-in-out;  /* A11Y-016 - P3: Reduced motion for keyboard nav */

    /* Tooltip Timing */
    --tooltip-delay: 300ms;
    --tooltip-transition: opacity 200ms ease-in-out;

    /* ===== Breakpoints (for reference in JS) ===== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ===== Accessibility ===== */
    --focus-outline-width: 3px;
    --focus-outline-color: var(--primary-color-accessible);
    --focus-outline-offset: 2px;

    /* ===== Surface Colors (light mode defaults) ===== */
    --bg-surface: var(--white);         /* Card/panel surface */
    --bg-elevated: var(--gray-100);     /* Elevated/overlay surface */
    --bcss-background: var(--gray-100); /* Page background alias */

    /* ===== Accessible Text Colors ===== */
    --info-text-color: #0a7c94;         /* 4.9:1 contrast on white */
    --warning-text-color: #856404;      /* 5.5:1 contrast on white */
    --success-text-color: #0a5c33;      /* 6.3:1 contrast on success-light */
    --danger-text-color: #6b1a23;       /* 7.0:1 AAA contrast on danger-light */

    /* ===== Navigation ===== */
    --nav-link-color: var(--gray-800);  /* 11.5:1 contrast on white */
    --nav-link-hover-color: var(--primary-color-accessible);

    /* ===== Footer ===== */
    --footer-bg: var(--gray-900);  /* Dark footer for WCAG AA contrast */
    --footer-text-color: var(--gray-300);
    --footer-brand-color: var(--white);
    --footer-tagline-color: var(--gray-400);
    --footer-link-color: var(--gray-400);
    --footer-link-hover-color: var(--white);
    --footer-heading-color: var(--white);
    --footer-copyright-color: var(--gray-400);  /* ACC-C01 P1: Lighter color for better contrast on dark footer bg (10.3:1) */
    --footer-divider-color: var(--gray-700);

    /* Minimum contrast ratios (WCAG 2.1 AA) - ACC-I25: Reference-only design tokens.
     * These are not consumed by CSS rules but document WCAG AA requirements
     * for auditing and design system reference purposes. */
    --min-contrast-normal: 4.5;      /* Normal text */
    --min-contrast-large: 3;         /* Large text (18pt+ or 14pt+ bold) */
    --min-contrast-ui: 3;            /* UI components and graphical objects */
}

/* ===== DARK MODE SUPPORT ===== */

/* Activated via [data-theme="dark"] attribute on <html> or <body> */

[data-theme="dark"] {
    /* ===== Background Colors ===== */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-surface: #2d2d2d;
    --bg-elevated: #383838;

    /* ===== Text Colors ===== */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #a0a0a0;         /* ACC-003 P0: Increased from #8a8a8a for 6.5:1 contrast on #1a1a2e - WCAG AA exceeded */
    --text-disabled: #727272;      /* 3:1 minimum for UI components */

    /* ===== Border Colors ===== */
    --border-color: #404040;
    --border-focus: #7597B3;

    /* ===== BCSS Brand Colors (Dark Mode Adjusted) ===== */
    --bcss-color-1: #b5c7d7;       /* Primary - brighter for dark backgrounds (increased from #95afc5) */
    --bcss-color-2: #6a7c8a;       /* Secondary - lighter for readability (increased from #5a6c7a) */
    --bcss-color-3: #808d9a;       /* Tertiary - lighter borders (increased from #707d8a) */
    --bcss-color-4: #d4b89f;       /* Warm accent - brighter (increased from #c4a88f) */
    --bcss-color-5: #aaa090;       /* Dark accent - lighter (increased from #9a8070) */

    /* ===== WCAG AA Accessible Color Variants (Dark) ===== */
    --bcss-color-1-accessible: #c5d7e7;  /* Primary accessible on dark backgrounds (increased for 4.5:1+) */
    --bcss-color-3-accessible: #b0b0b0;  /* Muted text accessible on dark backgrounds (increased from #a0a0a0) */
    --bcss-color-4-accessible: #d4b89f;  /* Warm accent accessible on dark backgrounds */

    /* ===== Semantic Color Mappings (Dark) ===== */
    --primary-color: #c5d7e7;  /* Increased from #95afc5 for better dark mode contrast */
    --primary-color-accessible: #c5d7e7;
    --primary-hover: #d5e7f7;
    --primary-active: #e5f7ff;
    --primary-light: #95afc5;
    --primary-lighter: #7a9ab5;
    --primary-lightest: #5a7a95;
    --secondary-color: #5a6c7a;
    --secondary-hover: #7a8c9a;
    --secondary-light: #8a9aa8;
    --secondary-lighter: #9DADBC;
    --accent-color: #c4a88f;
    --accent-hover: #d4b89f;
    --accent-dark: #9a8070;
    --muted-color: #707d8a;

    /* ===== Component Backgrounds (Dark) ===== */
    --btn-primary-bg: #4a7a9a;        /* ACC-033/034: Darkened from #7a9ab4 for 4.5:1+ contrast with white text on dark backgrounds */
    --btn-secondary-bg: #5a6c7a;
    --link-color: #a3d5f5;            /* ACC-004 P0: 10.9:1 contrast on #1a1a2e - WCAG AAA exceeded */
    --link-hover-color: #b5c7d7;
    --card-border: #404040;
    --input-border: #7a7a7a;          /* VIS-014 P1: Increased from #6c6c6c for 3.2:1 contrast (was 2.6:1) - WCAG AA */
    --badge-highlight: #c4a88f;
    --footer-accent: #9a8070;

    /* ===== Semantic Colors (Dark Mode Adjusted) ===== */
    --success-color: #48c774;
    --success-light: #1a3d2e;
    --info-color: #3498db;
    --info-light: #1a2d3d;
    --warning-color: #ffdd57;
    --warning-light: #3d3520;
    --warning-hover: #ffd633;  /* DSC-21e-01: Dark mode warning hover */
    --danger-color: #f14668;
    --danger-light: #3d1a20;
    --danger-hover: #e35d6a;  /* DSC-21e-02: Dark mode danger hover */

    /* ===== Semantic Surface Colors (Dark) ===== */
    --surface-primary: #1a1a2e;
    --surface-secondary: #2d2d2d;

    /* ===== Neutral Colors (Dark) ===== */
    /* --white and --black remain constant (not inverted) */
    --gray-100: #2d2d2d;
    --gray-200: #383838;
    --gray-300: #484848;
    --gray-400: #585858;
    --gray-500: #707070;
    --gray-600: #909090;
    --gray-700: #b0b0b0;
    --gray-800: #d0d0d0;
    --gray-900: #e0e0e0;

    /* ===== Chart Colors (Dark Mode) ===== */
    --chart-color-1: #7597B3;
    --chart-color-2: #48C774;
    --chart-color-3: #FFDD57;
    --chart-color-4: #F14668;
    --chart-color-5: #A78BFA;
    --chart-color-6: #67E8F9;
    --chart-color-7: #C4A882;
    --chart-color-8: #ADB5BD;

    /* ===== Shadows (Dark Mode) ===== */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 0.25rem rgba(149, 175, 197, 0.25);
    --shadow-focus-danger: 0 0 0 0.25rem rgba(241, 70, 104, 0.25); /* Dark mode danger */
    --shadow-focus-success: 0 0 0 0.25rem rgba(72, 199, 116, 0.25); /* Dark mode success */
    --shadow-focus-warning: 0 0 0 0.25rem rgba(255, 221, 87, 0.25); /* Dark mode warning */
    --shadow-focus-info: 0 0 0 0.25rem rgba(103, 232, 249, 0.25); /* Dark mode info */

    /* ===== Admin Sidebar Colors (Dark) ===== */
    --sidebar-bg: #16213e;
    --sidebar-text: #e0e0e0;
    --sidebar-text-muted: #b0b0b0;
    --sidebar-hover-bg: #0f3460;
    --sidebar-bg-hover: #0f3460;
    --sidebar-active-bg: #4a6a82;
    --sidebar-border: #404040;

    /* ===== Top Bar Colors (Dark) ===== */
    --top-bar-bg: #16213e;
    --top-bar-text: #e0e0e0;
    --top-bar-hover: #0f3460;

    /* ===== App Navigation Colors (Dark) ===== */
    --nav-bg: #1a1a2e;
    --nav-text: #f0f0f0;  /* Increased from #e0e0e0 for better contrast */
    --nav-hover-bg: #2d2d2d;
    --nav-active-bg: #0f3460;
    --nav-active-text: #b5c7d7;  /* Increased from #95afc5 for better contrast */
    --nav-border: #505050;  /* Increased from #404040 for better visibility */

    /* ===== Form Elements (Dark) ===== */
    --input-bg: #2d2d2d;
    --input-focus-border: #95afc5;
    --input-disabled-bg: #1a1a2e;

    /* ===== Tables (Dark) ===== */
    --table-header-bg: #16213e;
    --table-header-text: #e0e0e0;
    --table-border: #404040;
    --table-hover-bg: #2d2d2d;
    --table-striped-bg: #1f1f2e;

    /* ===== Card Components (Dark) ===== */
    --card-bg: #2d2d2d;
    --card-header-bg: #252525;
    --card-footer-bg: #252525;

    /* ===== Footer (Dark) ===== */
    --footer-bg: #16213e;
    --footer-text-color: #d0d0d0;  /* Improved from #b0b0b0 for better contrast */
    --footer-brand-color: #ffffff;
    --footer-tagline-color: #c0c0c0;  /* 8.7:1 contrast on #16213e */
    --footer-link-color: #b8c5d0;  /* 9.0:1 contrast on #16213e */
    --footer-link-hover-color: #ffffff;
    --footer-heading-color: #ffffff;
    --footer-copyright-color: #b0b0b0;  /* ACC-C03: Improved dark mode contrast (was #a0a0a0) */
    --footer-divider-color: #2a3f5f;

    /* ===== Surface Colors (Dark Mode) ===== */
    --bcss-background: var(--bg-primary);

    /* ===== Accessible Text Colors (Dark) ===== */
    --info-text-color: #5bc0de;
    --warning-text-color: #f0ad4e;
    --success-text-color: #6ee896;
    --danger-text-color: #ff6b8a;
}

/* PERF-023: @media (prefers-color-scheme: dark) block removed — it duplicated ~100
 * variables from [data-theme="dark"]. The FOUC prevention script in modern-admin-layout.html
 * sets data-theme="dark" based on OS preference when no manual override exists,
 * making the media query redundant. DES-T04 / VIS-V14/V22 resolved. */

/* High contrast mode support (accessibility) */
@media (prefers-contrast: more) {
    :root {
        --border-width: 2px;
        --focus-outline-width: 4px;
    }
}

/* Reduced motion support (accessibility) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}