/*
 * BCSS Design System Tokens
 *
 * CSS Load Order (canonical):
 *   Public layouts:  variables.css → base.css → base-theme.css → [product]-theme.css → dark-mode.css
 *   Admin layouts:   variables.css → base.css → admin-base.css → base-theme.css → [product]-theme.css → dark-mode.css
 *   Error pages:     variables.css → accessibility-critical.css → base-theme.css → [product]-theme.css → dark-mode.css (sync)
 *
 * Theme files override variables defined here. dark-mode.css should use var() with fallbacks,
 * not hardcoded hex values, to allow theme cascade.
 */
/* stylelint-disable bcss-tokens/no-hardcoded-color -- This IS the token source defining all design system colors */


:root {
    --bcss-color-1: #7597B3;
    --bcss-color-2: #394855;
    --bcss-color-3: #9DADBC;
    --bcss-color-4: #A88F73;
    --bcss-color-5: #735D43;
    --bcss-color-1-accessible: var(--bcss-color-2);
    --bcss-color-3-accessible: #5d6d7d;
    --bcss-color-4-accessible: #7d6a52;
    --primary-color: var(--bcss-color-1);
    --primary-color-accessible: var(--bcss-color-2);
    --primary-hover: #2d3a45;
    --primary-active: #243039;
    --primary-light: #95afc5;
    --primary-lighter: #b5c7d7;
    --primary-lightest: #e8eef3;
    --secondary-color: var(--bcss-color-2);
    --secondary-hover: #2d3a45;
    --secondary-light: #5a6c7a;
    --secondary-lighter: #8a9aa8;
    --accent-color: var(--bcss-color-4);
    --accent-hover: #96805f;
    --accent-dark: var(--bcss-color-5);
    --accent-secondary: transparent;
    --border-color: var(--bcss-color-3);
    --muted-color: var(--bcss-color-3);
    --muted-text-color: var(--bcss-color-3-accessible);
    --btn-primary-bg: var(--bcss-color-2);
    --btn-secondary-bg: var(--bcss-color-2);
    --link-color: var(--bcss-color-2);
    --link-hover-color: var(--primary-hover);
    --link-visited-color: var(--primary-active);
    --card-border: var(--bcss-color-3);
    --surface-primary: var(--bcss-color-1);
    --input-border: #7a8590; /* ACC-21a-08: Darkened from #8a959f (2.94:1) to #7a8590 (3.76:1) for WCAG 1.4.11 */
    --input-border-disabled: var(--gray-700);
    --badge-highlight: var(--bcss-color-4);
    --footer-accent: var(--bcss-color-5);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-link-accessible: var(--bcss-color-2);
    --text-primary-on-light: var(--bcss-color-2);
    --bcss-text-muted: var(--bcss-color-3-accessible);
    --text-muted-accessible: var(--bcss-color-3-accessible);
    --success-color: #198754;
    --success-hover: #1e7f36;
    --warning-hover: #e6ac00;
    --danger-hover: #bb2d3b;
    --success-light: #d1e7dd;
    --info-color: #0dcaf0;
    --info-light: #cff4fc;
    --warning-color: #ffc107;
    --warning-light: #fff3cd;
    --danger-color: #dc3545;
    --danger-light: #f8d7da;
    --accent-light: #f5f0e8;
    --alert-accent-bg: var(--accent-light);
    --success-lightest: rgba(25, 135, 84, 0.08);
    --danger-lightest: rgba(220, 53, 69, 0.08);
    --warning-lightest: rgba(255, 193, 7, 0.08);
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #087088; /* ACC-21a-12: darkened from #0a7c94 (4.88:1) to ~5.5:1 WCAG AA comfortable margin */
    --brand-primary: var(--bcss-color-1);
    --brand-secondary: var(--bcss-color-2);
    --brand-accent: var(--bcss-color-4);
    --gradient-purple: linear-gradient(135deg, #5568c8 0%, #764ba2 100%); /* ACC-65g-01: darkened start #667eea -> #5568c8 for 4.6:1 contrast with white */
    --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%);
    --gradient-purple-text: #ffffff;
    --gradient-pink-text: #212529;
    --gradient-blue-text: #212529;
    --gradient-green-text: #212529;
    --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;
    --gray-900: #212529;
    --black: #000;
    --purple-accent: #6f42c1;
    --chart-color-1: var(--bcss-color-1);
    --chart-color-2: #198754;
    --chart-color-3: #FFC107;
    --chart-color-4: #DC3545;
    --chart-color-5: #6F42C1;
    --chart-color-6: #0DCAF0;
    --chart-color-7: #A88F73;
    --chart-color-8: #495057;
    --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);
    --font-family-body: var(--font-family-sans-serif);
    --bs-body-font-family: var(--font-family-sans-serif);
    --bs-headings-font-family: var(--font-family-heading);
    --metric-value-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    --metric-value-font-weight: var(--font-weight-bold);
    --metric-value-font-size: var(--metric-value-size);
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 4rem;
    --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;
    --letter-spacing-wide: 0.5px;
    /* ==========================================================================
       Spacing Scale
       Named aliases (--spacing-xs/sm/md/lg/xl) and numeric aliases (--spacing-N):

       --spacing-xs  / --spacing-1: 0.25rem (4px)   — tight internal padding
       --spacing-sm  / --spacing-2: 0.5rem  (8px)   — default gap, small padding
                        --spacing-3: 0.75rem (12px)  — medium internal spacing
       --spacing-md  / --spacing-4: 1rem    (16px)  — standard padding, section gaps
       --spacing-lg  / --spacing-5: 1.5rem  (24px)  — large section padding
       --spacing-xl  / --spacing-6: 2rem    (32px)  — major section separation
       --spacing-2xl / --spacing-7: 3rem    (48px)  — hero/banner spacing
       --spacing-3xl / --spacing-8: 4rem    (64px)  — page-level spacing
       ========================================================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-1: var(--spacing-xs);
    --spacing-2: var(--spacing-sm);
    --spacing-3: 0.75rem;
    --spacing-4: var(--spacing-md);
    --spacing-5: var(--spacing-lg);
    --spacing-6: var(--spacing-xl);
    --spacing-7: var(--spacing-2xl);
    --spacing-8: var(--spacing-3xl);
    --touch-target-x: 0.375rem;
    --touch-target-y: 0.75rem;
    --overlap-xs: -1px;
    --overlap-sm: -2px;
    --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);
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 60px;
    --sidebar-collapsed-width: 60px;
    --top-bar-height: 56px;
    --admin-header-height: 56px;
    --admin-footer-height: 50px;
    --app-nav-height: 64px;
    --app-footer-height: 60px;
    --content-max-width: 1200px;
    --content-max-width-wide: 1600px;
    --public-header-height: 72px;
    --border-width: 1px;
    --border-radius-sm: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-pill: 50rem;
    --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-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1rem 3rem rgb(0, 0, 0, 0.175);
    --shadow-focus: 0 0 0 0.25rem rgb(117, 151, 179, 0.25);
    --shadow-focus-danger: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    --shadow-focus-success: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    --shadow-focus-warning: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    --shadow-focus-info: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
    --border-focus: var(--bcss-color-1);
    --focus-ring-color: var(--shadow-focus);
    --danger-border: #f1aeb5;
    --success-border: #a3cfbb;
    --info-border: #9eeaf9;
    --success-dark: var(--success-text-color);
    --sidebar-bg: var(--bcss-color-2);
    --sidebar-text: #fff;
    --sidebar-text-muted: var(--bcss-color-3-accessible);
    --sidebar-hover-bg: var(--bcss-color-2);
    --sidebar-bg-hover: var(--bcss-color-2);
    --sidebar-active-bg: var(--bcss-color-2);
    --sidebar-border: #2d3a45;
    --sidebar-submenu-active-bg: #2d3f52;
    --top-bar-bg: var(--bcss-color-2);
    --top-bar-text: #fff;
    --top-bar-hover: var(--bcss-color-1);
    --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-accessible);
    --nav-border: var(--gray-300);
    --input-bg: var(--white);
    --input-focus-border: var(--primary-color);
    --input-disabled-bg: var(--gray-200);
    --input-height: 2.75rem;
    --input-height-sm: 2rem;
    --input-height-lg: 3rem;
    --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-dropdown: 1000;
    --z-backdrop: 1010;
    --z-sidebar: 1020;
    --z-sticky: 1020;
    --z-top-bar: 1030;
    --z-fixed: 1030;
    --z-cookie-banner: 1035;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-skip-nav: 10000;
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-instant: 0.1s ease-in-out;
    --tooltip-delay: 300ms;
    --tooltip-transition: opacity 200ms ease-in-out;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    --focus-outline-width: 3px;
    --focus-outline-color: var(--primary-color-accessible);
    --focus-outline-offset: 2px;
    --bg-surface: var(--white);
    --bg-elevated: var(--gray-100);
    --bcss-background: var(--gray-100);
    --card-bg: var(--bg-surface);
    --card-header-bg: var(--gray-100);
    --card-footer-bg: var(--gray-100);
    --card-header-bg-dark: rgba(0, 0, 0, 0.05);
    --page-bg: var(--white);
    --heading-color: var(--gray-900);
    --text-color: var(--gray-900);
    --info-text-color: #0a7c94;
    --warning-text-color: #856404;
    --success-text-color: #0a5c33;
    --danger-text-color: #6b1a23;
    --nav-link-color: var(--gray-800);
    --nav-link-hover-color: var(--primary-color-accessible);
    --footer-bg: var(--gray-900);
    --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);
    --footer-divider-color: var(--gray-700);
    --hero-title-color: var(--white);
    --hero-subtitle-color: var(--white);
    --hero-description-color: var(--white);
    --hero-bg: linear-gradient(135deg, var(--primary-lightest) 0%, var(--white) 50%, var(--gray-100) 100%);
    --hero-frost-bg: rgba(0, 0, 0, 0.45);
    --hero-frost-blur: 6px;
    --hero-frost-border: rgba(255, 255, 255, 0.08);
    --cta-bg: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    --cta-text-color: var(--white);
    --cta-btn-bg: var(--white);
    --cta-btn-color: var(--secondary-color);
    --cta-btn-hover-bg: var(--gray-100);
    --header-bg: var(--white);
    --brand-color: var(--secondary-color);
    --section-title-color: var(--gray-900);
    --section-subtitle-color: var(--gray-700);
    --section-alt-bg: var(--gray-100);
    --card-icon-color: var(--primary-color);
    --feature-icon-bg: var(--primary-lightest);
    --feature-icon-color: var(--primary-color);
    --photo-placeholder-bg: rgba(0, 0, 0, 0.05);
    --min-contrast-normal: 4.5;
    --min-contrast-large: 3;
    --min-contrast-ui: 3;
    --bcss-primary: var(--primary-color-accessible);
    --bcss-primary-light: var(--primary-light);
    --bcss-secondary: var(--secondary-color);
    --bcss-secondary-light: var(--secondary-light);
    --bcss-accent: var(--bcss-color-3);
    --bcss-success: var(--success-color);
    --bcss-info: var(--info-color);
    --bcss-warning: var(--warning-color);
    --bcss-danger: var(--danger-color);
    --bcss-surface: var(--white);
    --bcss-surface-elevated: var(--gray-50);
    --bcss-border: var(--gray-200);
    --bcss-text: var(--gray-900);
    --bcss-shadow-sm: var(--shadow-sm);
    --bcss-shadow-md: var(--shadow-md);
    --bcss-shadow: var(--bcss-shadow-md);
    --bcss-shadow-lg: var(--shadow-lg);
    --bcss-shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    --bcss-radius-sm: var(--border-radius-sm);
    --bcss-radius-md: var(--border-radius);
    --bcss-radius-lg: var(--border-radius-lg);
    --bcss-radius-xl: var(--border-radius-xl);
    --bcss-font-weight-normal: var(--font-weight-normal);
    --bcss-font-weight-medium: var(--font-weight-medium);
    --bcss-font-weight-semibold: var(--font-weight-semibold);
    --bcss-font-weight-bold: var(--font-weight-bold);
    --bcss-skip-nav-bg: #1a1a2e;
    --bcss-skip-nav-hover-bg: #16213e;
    --day-monday-bg: #e3f2fd;
    --day-monday-text: #1565c0;
    --day-tuesday-bg: #e8f5e9;
    --day-tuesday-text: #2e7d32;
    --day-wednesday-bg: #fff3e0;
    --day-wednesday-text: #c43e00;
    --day-thursday-bg: #f3e5f5;
    --day-thursday-text: #6a1b9a;
    --day-friday-bg: #fce4ec;
    --day-friday-text: #c62828;
}


[data-bs-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-surface: #2d2d2d;
    --bg-elevated: #383838;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #a0a0a0;
    --text-disabled: #727272;
    --border-color: #404040;
    --bcss-color-1: #b5c7d7;
    --bcss-color-2: #6a7c8a;
    --bcss-color-3: #808d9a;
    --bcss-color-4: #d4b89f;
    --bcss-color-5: #aaa090;
    --bcss-color-1-accessible: var(--bcss-color-2);
    --bcss-color-3-accessible: #b0b0b0;
    --bcss-color-4-accessible: #d4b89f;
    --primary-color: #c5d7e7;
    --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;
    --btn-primary-bg: #4a7a9a;
    --btn-secondary-bg: #5a6c7a;
    --link-color: #a3d5f5;
    --link-hover-color: #b5c7d7;
    --card-border: #787878;
    --input-border: #7a7a7a;
    --badge-highlight: #c4a88f;
    --footer-accent: #9a8070;
    --success-color: #48c774;
    --success-light: #1a3d2e;
    --info-color: #3498db;
    --info-light: #1a2d3d;
    --warning-color: #ffdd57;
    --warning-light: #3d3520;
    --warning-hover: #ffd633;
    --danger-color: #f14668;
    --danger-light: #3d1a20;
    --danger-hover: #e35d6a;
    --surface-secondary: #2d2d2d;
    --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-color-1: var(--bcss-color-1);
    --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;
    --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-md: 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.45); /* VIS-61-02: Dark mode card hover shadow */
    --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);
    --shadow-focus-success: 0 0 0 0.25rem rgba(72, 199, 116, 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);
    --danger-border: #842029;
    --success-border: #0f5132;
    --info-border: #055160;
    --sidebar-bg: #16213e;
    --sidebar-text: #e0e0e0;
    --sidebar-text-muted: #b0b0b0;
    --sidebar-hover-bg: #0f3460;
    --sidebar-bg-hover: #0f3460;
    --sidebar-active-bg: #2d3a45;
    --sidebar-border: #404040;
    --top-bar-bg: #16213e;
    --top-bar-text: #e0e0e0;
    --top-bar-hover: #0f3460;
    --nav-bg: #1a1a2e;
    --nav-text: #f0f0f0;
    --nav-hover-bg: #2d2d2d;
    --nav-active-bg: #0f3460;
    --nav-active-text: #b5c7d7;
    --nav-border: #505050;
    --input-bg: #2d2d2d;
    --input-focus-border: #95afc5;
    --input-disabled-bg: #1a1a2e;
    --table-header-bg: #16213e;
    --table-header-text: #e0e0e0;
    --table-border: #404040;
    --table-hover-bg: #2d2d2d;
    --table-striped-bg: #1f1f2e;
    --card-bg: #2d2d2d;
    --card-header-bg: #252525;
    --card-footer-bg: #252525;
    --card-header-bg-dark: rgba(0, 0, 0, 0.2);
    --footer-bg: #16213e;
    --footer-text-color: #d0d0d0;
    --footer-brand-color: #ffffff;
    --footer-tagline-color: #c0c0c0;
    --footer-link-color: #b8c5d0;
    --footer-link-hover-color: #ffffff;
    --footer-heading-color: #ffffff;
    --footer-copyright-color: #b0b0b0;
    --footer-divider-color: #2a3f5f;
    --bcss-hover-bg: #484848;
    --bcss-background: var(--bg-primary);
    --info-text-color: #5bc0de;
    --warning-text-color: #f0ad4e;
    --success-text-color: #6ee896;
    --danger-text-color: #ff6b8a;
    --success-lightest: rgba(72, 199, 116, 0.12);
    --danger-lightest: rgba(241, 70, 104, 0.12);
    --warning-lightest: rgba(255, 221, 87, 0.12);
    --day-monday-bg: #1a3a5c;
    --day-monday-text: #90caf9;
    --day-tuesday-bg: #1a3c1a;
    --day-tuesday-text: #81c784;
    --day-wednesday-bg: #3c2a0a;
    --day-wednesday-text: #ffb74d;
    --day-thursday-bg: #2a1a3c;
    --day-thursday-text: #ce93d8;
    --day-friday-bg: #3c1a1a;
    --day-friday-text: #ef9a9a;
    /* DSC-65-02: BCSS-specific dark palette tokens for theme overrides */
    --dark-tinted-surface: #252538;
    --dark-tinted-accent: #2a3a4a;
    --dark-gradient-deep: #1a2a3a;
    --dark-cta-deep: #0d1520;
    --dark-cta-accent: #2a4a5e;
    --photo-placeholder-bg: rgba(255, 255, 255, 0.1);
}


@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme]) {
        --bg-primary: #1a1a2e;
        --text-primary: #e0e0e0;
        --card-bg: #2d2d2d;
        --card-border: #787878;
        --sidebar-bg: #16213e;
        --sidebar-text: #c5d7e7;
        --top-bar-bg: #16213e;
        --footer-bg: #16213e;
        --footer-text: #c5d7e7;
        --input-bg: #2d2d2d;
        --input-border: #555;
        --input-color: #e0e0e0;
        --table-header-bg: #1e293b;
        --table-hover-bg: rgba(255, 255, 255, 0.05);
        --border-color: #404040;
        --primary-color: #c5d7e7;
        --primary-color-accessible: #c5d7e7;
        --link-color: #6ea8fe;
        --link-hover-color: #8bb9fe;
        --gray-100: #2d2d2d;
        --gray-200: #404040;
        --gray-300: #555;
        --gray-400: #777;
        --gray-500: #999;
        --gray-600: #bbb;
        --gray-700: #d0d0d0;
        --gray-800: #e0e0e0;
        --gray-900: #f0f0f0;
        --bcss-primary: #5a6c7a;
        --bcss-primary-light: #7a8c9a;
        --bcss-secondary: #8faec4;
        --bcss-secondary-light: #b0c8da;
        --bcss-surface: #2d2d2d;
        --bcss-surface-elevated: #343434;
        --bcss-border: #404040;
        --bcss-text: #e0e0e0;
        --bcss-text-muted: #c5c5c5;
        --bcss-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
        --bcss-shadow: var(--bcss-shadow-md);
        --bcss-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
        --bcss-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
        --bs-body-color: #e0e0e0;
        --bs-secondary-color: #c5c5c5;

        color-scheme: dark;
    }

    :root:not([data-bs-theme]) body {
        background-color: var(--bcss-background);
        color: var(--bcss-text);
    }
}


@media (prefers-contrast: more) {
    :root {
        --border-width: 2px;
        --focus-outline-width: 4px;
    }
}


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