/* ========================================
   MOLFORGE THEME — SINGLE SOURCE OF TRUTH
   All CSS custom properties for dark & light themes.
   Linked FIRST in every HTML page.
   ======================================== */

/* ========================================
   DARK THEME (default)
   ======================================== */
:root {
  color-scheme: light dark;

  /* ---- Core palette ---- */
  --bg-primary: #0a0e27;
  --bg-secondary: #151932;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --accent-primary: #00d4ff;
  --accent-secondary: #7c3aed;
  --accent-gradient: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  --accent-gradient-reverse: linear-gradient(135deg, #7c3aed 0%, #00d4ff 100%);

  /* ---- Semantic colors ---- */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* ---- Surfaces ---- */
  --card-bg: rgba(30, 35, 56, 0.6);
  --card-border: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(30, 35, 56, 0.5);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ---- Shadows ---- */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.4);
  --cta-glow: 0 4px 15px rgba(0, 212, 255, 0.3);
  --cta-glow-hover: 0 8px 25px rgba(0, 212, 255, 0.5);
  --danger-glow: 0 4px 15px rgba(239, 68, 68, 0.3);

  /* ---- Overlays & interaction ---- */
  --hover-overlay: rgba(0, 212, 255, 0.1);
  --hover-overlay-subtle: rgba(0, 212, 255, 0.06);
  --accent-bg: rgba(0, 212, 255, 0.15);
  --accent-bg-strong: rgba(0, 212, 255, 0.2);

  /* ---- Input ---- */
  --input-bg: rgba(21, 25, 50, 0.6);
  --input-focus-bg: rgba(21, 25, 50, 0.8);
  --input-row-bg: rgba(0, 0, 0, 0.2);

  /* ---- Viewer / Canvas ---- */
  --viewer-bg: #0a0e27;
  --canvas-bg: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  --tooltip-bg: rgba(10, 14, 39, 0.85);
  --loader-overlay-bg: rgba(10, 14, 39, 0.8);

  /* ---- Skeleton shimmer ---- */
  --shimmer-from: rgba(255, 255, 255, 0.05);
  --shimmer-to: rgba(255, 255, 255, 0.1);

  /* ---- Scrollbar ---- */
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-track: transparent;

  /* ---- Chat / copilot ---- */
  --msg-ai-bg: rgba(255, 255, 255, 0.06);
  --msg-ai-border: rgba(255, 255, 255, 0.08);
  --copilot-btn-bg: rgba(255, 255, 255, 0.06);
  --copilot-btn-border: rgba(255, 255, 255, 0.1);
  --copilot-code-bg: rgba(0, 212, 255, 0.1);

  /* ---- Decorative ---- */
  --glow-orb-1: rgba(0, 212, 255, 0.15);
  --glow-orb-2: rgba(124, 58, 237, 0.15);
  --grid-line: rgba(0, 212, 255, 0.05);
  --accent-border: rgba(0, 212, 255, 0.3);
  --card-hover-opacity: 0.05;
  --cta-pulse: rgba(0, 212, 255, 0.1);
  --cta-section-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);

  /* ---- Hero ---- */
  --hero-gradient: linear-gradient(90deg, #fff 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);

  /* ---- Hamburger & misc ---- */
  --hamburger-color: #fff;
  --mol-viewer-bg: rgba(0, 0, 0, 0.5);
  --tag-bg: rgba(21, 25, 50, 0.6);
  --header-bg: rgba(21, 25, 50, 0.8);
  --header-scrolled-bg: rgba(10, 14, 39, 0.95);
  --footer-bg: rgba(10, 14, 39, 0.95);
  --mobile-menu-bg: rgba(21, 25, 50, 0.98);
  --text-on-gradient: #fff;

  /* ---- Google sign-in button ---- */
  --google-bg: #ffffff;
  --google-text: #1f2937;
  --google-border: rgba(255, 255, 255, 0.2);
  --google-hover: #f3f4f6;

  /* ---- Auth ---- */
  --error: #ef4444;
  --form-panel-bg: #151932;

  /* ---- Close button ---- */
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);

  /* ---- Drug score bar bg ---- */
  --bar-track-bg: rgba(255, 255, 255, 0.08);

  /* ---- Chart.js ---- */
  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-label: rgba(255, 255, 255, 0.7);
  --chart-point-border: #fff;
  --chart-accent-fill: rgba(0, 212, 255, 0.15);
  --chart-accent-stroke: rgba(0, 212, 255, 0.8);
  --chart-accent-point: rgba(0, 212, 255, 1);
  --chart-secondary-fill: rgba(124, 58, 237, 0.15);
  --chart-secondary-stroke: rgba(124, 58, 237, 0.8);
  --chart-secondary-point: rgba(124, 58, 237, 1);

  /* ---- THREE.js (read via getComputedStyle) ---- */
  --three-grid-primary: #1a1f3a;
  --three-accent-hex: #00d4ff;

  /* ---- Status pills ---- */
  --status-demo-bg: rgba(124, 58, 237, 0.15);
  --status-demo-color: #a78bfa;
  --status-demo-border: rgba(124, 58, 237, 0.3);
  --status-online-bg: rgba(16, 185, 129, 0.15);
  --status-online-color: #10b981;
  --status-online-border: rgba(16, 185, 129, 0.3);

  /* ---- Bootstrap overrides ---- */
  --offcanvas-close-filter: invert(1);
  --bg-dark-override: rgba(0, 0, 0, 0.2);

  /* ---- Layout ---- */
  --navbar-height: 56px;
  --border-radius: 12px;
  --transition-speed: 0.3s;

  /* ===== ALIASES for landing/auth/settings pages ===== */
  --background: var(--bg-primary);
  --surface: var(--bg-secondary);
  --primary: var(--accent-primary);
  --primary-dark: #0099cc;
  --secondary: var(--accent-secondary);
  --gradient: var(--accent-gradient);
  --text: var(--text-primary);
  --text-light: var(--text-secondary);
  --shadow: var(--shadow-lg);
  --glow: var(--shadow-glow);
}

/* ========================================
   LIGHT THEME — Google Material Design Colors
   ======================================== */
:root.light-theme {
  /* ---- Core palette ---- */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --accent-primary: #1a73e8;
  --accent-secondary: #7c3aed;
  --accent-gradient: linear-gradient(135deg, #1a73e8 0%, #7c3aed 100%);
  --accent-gradient-reverse: linear-gradient(135deg, #7c3aed 0%, #1a73e8 100%);

  /* ---- Semantic colors (Google palette) ---- */
  --success: #1e8e3e;
  --warning: #f9ab00;
  --danger: #d93025;
  --info: #1a73e8;

  /* ---- Surfaces ---- */
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: #dadce0;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);

  /* ---- Shadows ---- */
  --shadow-md: 0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1);
  --shadow-lg: 0 1px 6px rgba(60, 64, 67, 0.12), 0 2px 12px rgba(60, 64, 67, 0.08);
  --shadow-glow: 0 1px 6px rgba(26, 115, 232, 0.2);
  --cta-glow: 0 1px 6px rgba(26, 115, 232, 0.25);
  --cta-glow-hover: 0 2px 12px rgba(26, 115, 232, 0.35);
  --danger-glow: 0 1px 6px rgba(217, 48, 37, 0.2);

  /* ---- Overlays & interaction ---- */
  --hover-overlay: rgba(26, 115, 232, 0.08);
  --hover-overlay-subtle: rgba(26, 115, 232, 0.04);
  --accent-bg: rgba(26, 115, 232, 0.1);
  --accent-bg-strong: rgba(26, 115, 232, 0.15);

  /* ---- Input ---- */
  --input-bg: #ffffff;
  --input-focus-bg: #ffffff;
  --input-row-bg: rgba(0, 0, 0, 0.04);

  /* ---- Viewer / Canvas ---- */
  --viewer-bg: #1a1c2e;
  --canvas-bg: linear-gradient(135deg, #1a1c2e 0%, #2a2d4a 100%);
  --tooltip-bg: rgba(32, 33, 36, 0.92);
  --loader-overlay-bg: rgba(255, 255, 255, 0.85);

  /* ---- Skeleton shimmer ---- */
  --shimmer-from: rgba(0, 0, 0, 0.04);
  --shimmer-to: rgba(0, 0, 0, 0.08);

  /* ---- Scrollbar ---- */
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-track: transparent;

  /* ---- Chat / copilot ---- */
  --msg-ai-bg: rgba(0, 0, 0, 0.04);
  --msg-ai-border: #dadce0;
  --copilot-btn-bg: rgba(0, 0, 0, 0.04);
  --copilot-btn-border: #dadce0;
  --copilot-code-bg: rgba(26, 115, 232, 0.08);

  /* ---- Decorative ---- */
  --glow-orb-1: rgba(26, 115, 232, 0.06);
  --glow-orb-2: rgba(124, 58, 237, 0.06);
  --grid-line: rgba(0, 0, 0, 0.03);
  --accent-border: rgba(26, 115, 232, 0.25);
  --card-hover-opacity: 0.04;
  --cta-pulse: rgba(26, 115, 232, 0.06);
  --cta-section-bg: linear-gradient(135deg, rgba(26, 115, 232, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%);

  /* ---- Hero ---- */
  --hero-gradient: linear-gradient(90deg, #202124 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);

  /* ---- Hamburger & misc ---- */
  --hamburger-color: #202124;
  --mol-viewer-bg: rgba(255, 255, 255, 0.6);
  --tag-bg: rgba(255, 255, 255, 0.8);
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-scrolled-bg: rgba(248, 249, 250, 0.98);
  --footer-bg: rgba(248, 249, 250, 0.98);
  --mobile-menu-bg: rgba(255, 255, 255, 0.98);
  --text-on-gradient: #ffffff;

  /* ---- Google sign-in button ---- */
  --google-bg: #ffffff;
  --google-text: #1f2937;
  --google-border: #dadce0;
  --google-hover: #f8f9fa;

  /* ---- Auth ---- */
  --error: #d93025;
  --form-panel-bg: #ffffff;

  /* ---- Close button ---- */
  --btn-close-filter: none;

  /* ---- Drug score bar bg ---- */
  --bar-track-bg: rgba(0, 0, 0, 0.06);

  /* ---- Chart.js ---- */
  --chart-grid: rgba(0, 0, 0, 0.08);
  --chart-label: #5f6368;
  --chart-point-border: #fff;
  --chart-accent-fill: rgba(26, 115, 232, 0.12);
  --chart-accent-stroke: rgba(26, 115, 232, 0.85);
  --chart-accent-point: #1a73e8;
  --chart-secondary-fill: rgba(124, 58, 237, 0.12);
  --chart-secondary-stroke: rgba(124, 58, 237, 0.85);
  --chart-secondary-point: #7c3aed;

  /* ---- THREE.js ---- */
  --three-grid-primary: #c0c4cc;
  --three-accent-hex: #1a73e8;

  /* ---- Status pills ---- */
  --status-demo-bg: rgba(124, 58, 237, 0.1);
  --status-demo-color: #7c3aed;
  --status-demo-border: rgba(124, 58, 237, 0.25);
  --status-online-bg: rgba(30, 142, 62, 0.1);
  --status-online-color: #1e8e3e;
  --status-online-border: rgba(30, 142, 62, 0.25);

  /* ---- Bootstrap overrides ---- */
  --offcanvas-close-filter: none;
  --bg-dark-override: rgba(0, 0, 0, 0.04);

  /* ===== ALIASES ===== */
  --background: var(--bg-primary);
  --surface: var(--bg-secondary);
  --primary: var(--accent-primary);
  --primary-dark: #1557b0;
  --secondary: var(--accent-secondary);
  --gradient: var(--accent-gradient);
  --text: var(--text-primary);
  --text-light: var(--text-secondary);
  --shadow: var(--shadow-lg);
  --glow: var(--shadow-glow);
}

/* OS preference: apply light theme if user hasn't explicitly chosen */
@media (prefers-color-scheme: light) {
  :root:not(.dark-theme) {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --accent-primary: #1a73e8;
    --accent-secondary: #7c3aed;
    --accent-gradient: linear-gradient(135deg, #1a73e8 0%, #7c3aed 100%);
    --accent-gradient-reverse: linear-gradient(135deg, #7c3aed 0%, #1a73e8 100%);

    --success: #1e8e3e;
    --warning: #f9ab00;
    --danger: #d93025;
    --info: #1a73e8;

    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: #dadce0;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);

    --shadow-md: 0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1);
    --shadow-lg: 0 1px 6px rgba(60, 64, 67, 0.12), 0 2px 12px rgba(60, 64, 67, 0.08);
    --shadow-glow: 0 1px 6px rgba(26, 115, 232, 0.2);
    --cta-glow: 0 1px 6px rgba(26, 115, 232, 0.25);
    --cta-glow-hover: 0 2px 12px rgba(26, 115, 232, 0.35);
    --danger-glow: 0 1px 6px rgba(217, 48, 37, 0.2);

    --hover-overlay: rgba(26, 115, 232, 0.08);
    --hover-overlay-subtle: rgba(26, 115, 232, 0.04);
    --accent-bg: rgba(26, 115, 232, 0.1);
    --accent-bg-strong: rgba(26, 115, 232, 0.15);

    --input-bg: #ffffff;
    --input-focus-bg: #ffffff;
    --input-row-bg: rgba(0, 0, 0, 0.04);

    --viewer-bg: #1a1c2e;
    --canvas-bg: linear-gradient(135deg, #1a1c2e 0%, #2a2d4a 100%);
    --tooltip-bg: rgba(32, 33, 36, 0.92);
    --loader-overlay-bg: rgba(255, 255, 255, 0.85);

    --shimmer-from: rgba(0, 0, 0, 0.04);
    --shimmer-to: rgba(0, 0, 0, 0.08);

    --scrollbar-thumb: rgba(0, 0, 0, 0.15);
    --scrollbar-track: transparent;

    --msg-ai-bg: rgba(0, 0, 0, 0.04);
    --msg-ai-border: #dadce0;
    --copilot-btn-bg: rgba(0, 0, 0, 0.04);
    --copilot-btn-border: #dadce0;
    --copilot-code-bg: rgba(26, 115, 232, 0.08);

    --glow-orb-1: rgba(26, 115, 232, 0.06);
    --glow-orb-2: rgba(124, 58, 237, 0.06);
    --grid-line: rgba(0, 0, 0, 0.03);
    --accent-border: rgba(26, 115, 232, 0.25);
    --card-hover-opacity: 0.04;
    --cta-pulse: rgba(26, 115, 232, 0.06);
    --cta-section-bg: linear-gradient(135deg, rgba(26, 115, 232, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%);

    --hero-gradient: linear-gradient(90deg, #202124 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);

    --hamburger-color: #202124;
    --mol-viewer-bg: rgba(255, 255, 255, 0.6);
    --tag-bg: rgba(255, 255, 255, 0.8);
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-scrolled-bg: rgba(248, 249, 250, 0.98);
    --footer-bg: rgba(248, 249, 250, 0.98);
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --text-on-gradient: #ffffff;

    --google-bg: #ffffff;
    --google-text: #1f2937;
    --google-border: #dadce0;
    --google-hover: #f8f9fa;

    --error: #d93025;
    --form-panel-bg: #ffffff;
    --btn-close-filter: none;
    --bar-track-bg: rgba(0, 0, 0, 0.06);

    --chart-grid: rgba(0, 0, 0, 0.08);
    --chart-label: #5f6368;
    --chart-point-border: #fff;
    --chart-accent-fill: rgba(26, 115, 232, 0.12);
    --chart-accent-stroke: rgba(26, 115, 232, 0.85);
    --chart-accent-point: #1a73e8;
    --chart-secondary-fill: rgba(124, 58, 237, 0.12);
    --chart-secondary-stroke: rgba(124, 58, 237, 0.85);
    --chart-secondary-point: #7c3aed;

    --three-grid-primary: #c0c4cc;
    --three-accent-hex: #1a73e8;

    --status-demo-bg: rgba(124, 58, 237, 0.1);
    --status-demo-color: #7c3aed;
    --status-demo-border: rgba(124, 58, 237, 0.25);
    --status-online-bg: rgba(30, 142, 62, 0.1);
    --status-online-color: #1e8e3e;
    --status-online-border: rgba(30, 142, 62, 0.25);

    --offcanvas-close-filter: none;
    --bg-dark-override: rgba(0, 0, 0, 0.04);

    --background: var(--bg-primary);
    --surface: var(--bg-secondary);
    --primary: var(--accent-primary);
    --primary-dark: #1557b0;
    --secondary: var(--accent-secondary);
    --gradient: var(--accent-gradient);
    --text: var(--text-primary);
    --text-light: var(--text-secondary);
    --shadow: var(--shadow-lg);
    --glow: var(--shadow-glow);
  }
}

/* Explicit dark override (user manually selected dark) */
:root.dark-theme {
  --bg-primary: #0a0e27;
  --bg-secondary: #151932;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --accent-primary: #00d4ff;
  --accent-secondary: #7c3aed;
  --accent-gradient: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  --accent-gradient-reverse: linear-gradient(135deg, #7c3aed 0%, #00d4ff 100%);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  --card-bg: rgba(30, 35, 56, 0.6);
  --card-border: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(30, 35, 56, 0.5);
  --glass-border: rgba(255, 255, 255, 0.08);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.4);
  --cta-glow: 0 4px 15px rgba(0, 212, 255, 0.3);
  --cta-glow-hover: 0 8px 25px rgba(0, 212, 255, 0.5);
  --danger-glow: 0 4px 15px rgba(239, 68, 68, 0.3);

  --hover-overlay: rgba(0, 212, 255, 0.1);
  --hover-overlay-subtle: rgba(0, 212, 255, 0.06);
  --accent-bg: rgba(0, 212, 255, 0.15);
  --accent-bg-strong: rgba(0, 212, 255, 0.2);

  --input-bg: rgba(21, 25, 50, 0.6);
  --input-focus-bg: rgba(21, 25, 50, 0.8);
  --input-row-bg: rgba(0, 0, 0, 0.2);

  --viewer-bg: #0a0e27;
  --canvas-bg: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  --tooltip-bg: rgba(10, 14, 39, 0.85);
  --loader-overlay-bg: rgba(10, 14, 39, 0.8);

  --shimmer-from: rgba(255, 255, 255, 0.05);
  --shimmer-to: rgba(255, 255, 255, 0.1);

  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-track: transparent;

  --msg-ai-bg: rgba(255, 255, 255, 0.06);
  --msg-ai-border: rgba(255, 255, 255, 0.08);
  --copilot-btn-bg: rgba(255, 255, 255, 0.06);
  --copilot-btn-border: rgba(255, 255, 255, 0.1);
  --copilot-code-bg: rgba(0, 212, 255, 0.1);

  --glow-orb-1: rgba(0, 212, 255, 0.15);
  --glow-orb-2: rgba(124, 58, 237, 0.15);
  --grid-line: rgba(0, 212, 255, 0.05);
  --accent-border: rgba(0, 212, 255, 0.3);
  --card-hover-opacity: 0.05;
  --cta-pulse: rgba(0, 212, 255, 0.1);
  --cta-section-bg: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);

  --hero-gradient: linear-gradient(90deg, #fff 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);

  --hamburger-color: #fff;
  --mol-viewer-bg: rgba(0, 0, 0, 0.5);
  --tag-bg: rgba(21, 25, 50, 0.6);
  --header-bg: rgba(21, 25, 50, 0.8);
  --header-scrolled-bg: rgba(10, 14, 39, 0.95);
  --footer-bg: rgba(10, 14, 39, 0.95);
  --mobile-menu-bg: rgba(21, 25, 50, 0.98);
  --text-on-gradient: #fff;

  --google-bg: #ffffff;
  --google-text: #1f2937;
  --google-border: rgba(255, 255, 255, 0.2);
  --google-hover: #f3f4f6;

  --error: #ef4444;
  --form-panel-bg: #151932;
  --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
  --bar-track-bg: rgba(255, 255, 255, 0.08);

  --chart-grid: rgba(255, 255, 255, 0.1);
  --chart-label: rgba(255, 255, 255, 0.7);
  --chart-point-border: #fff;
  --chart-accent-fill: rgba(0, 212, 255, 0.15);
  --chart-accent-stroke: rgba(0, 212, 255, 0.8);
  --chart-accent-point: rgba(0, 212, 255, 1);
  --chart-secondary-fill: rgba(124, 58, 237, 0.15);
  --chart-secondary-stroke: rgba(124, 58, 237, 0.8);
  --chart-secondary-point: rgba(124, 58, 237, 1);

  --three-grid-primary: #1a1f3a;
  --three-accent-hex: #00d4ff;

  --status-demo-bg: rgba(124, 58, 237, 0.15);
  --status-demo-color: #a78bfa;
  --status-demo-border: rgba(124, 58, 237, 0.3);
  --status-online-bg: rgba(16, 185, 129, 0.15);
  --status-online-color: #10b981;
  --status-online-border: rgba(16, 185, 129, 0.3);

  --offcanvas-close-filter: invert(1);
  --bg-dark-override: rgba(0, 0, 0, 0.2);

  --background: var(--bg-primary);
  --surface: var(--bg-secondary);
  --primary: var(--accent-primary);
  --primary-dark: #0099cc;
  --secondary: var(--accent-secondary);
  --gradient: var(--accent-gradient);
  --text: var(--text-primary);
  --text-light: var(--text-secondary);
  --shadow: var(--shadow-lg);
  --glow: var(--shadow-glow);
}

/* ========================================
   GLOBAL COMPONENT OVERRIDES
   ======================================== */

/* Bootstrap .btn-close → theme-aware via CSS variable */
.btn-close {
  filter: var(--offcanvas-close-filter) !important;
}

/* Bootstrap .bg-dark → theme-aware replacement class */
.bg-dark-themed {
  background: var(--bg-dark-override) !important;
}

/* Smooth theme transition */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}