/*
===========================================
Custom Bootstrap Color Theme Override
===========================================
This file contains comprehensive color customizations for all Bootstrap components
including buttons, backgrounds, borders, text, shadows, hover effects, and more.

Available Color Schemes:
1. American Patriotic (Default) - Red, White, Blue theme
2. Dark Professional - Modern dark theme with purple accents
3. Modern Ocean - Fresh blue-green ocean theme

To switch themes, change the :root selector to one of:
- :root (American Patriotic - Default)
- :root.theme-dark-professional 
- :root.theme-modern-ocean
*/

/* 
===========================================
COLOR SCHEME 1: American Patriotic (Default)
===========================================
*/
:root {
  /* Primary Colors - USA Blue */
  --bs-primary: #002868;
  --bs-primary-rgb: 0, 40, 104;
  --bs-primary-light: #1e4d8b;
  --bs-primary-dark: #001b4d;
  
  /* Secondary Colors - Silver/Gray */
  --bs-secondary: #5a6570;
  --bs-secondary-rgb: 90, 101, 112;
  --bs-secondary-light: #7a8590;
  --bs-secondary-dark: #404850;
  
  /* Success Colors - Forest Green */
  --bs-success: #228B22;
  --bs-success-rgb: 34, 139, 34;
  --bs-success-light: #32CD32;
  --bs-success-dark: #006400;
  
  /* Info Colors - Liberty Blue */
  --bs-info: #4169E1;
  --bs-info-rgb: 65, 105, 225;
  --bs-info-light: #6495ED;
  --bs-info-dark: #0000CD;
  
/* Warning Colors - Light Gold */
--bs-warning: #FFD700;
--bs-warning-rgb: 255, 215, 0;
--bs-warning-light: #FFED4E;
--bs-warning-dark: #E6C200;
  /* Danger Colors - Old Glory Red */
  --bs-danger: #B22234;
  --bs-danger-rgb: 178, 34, 52;
  --bs-danger-light: #DC143C;
  --bs-danger-dark: #8B0000;
  
  /* Light Colors - Pure White */
  --bs-light: #FFFFFF;
  --bs-light-rgb: 255, 255, 255;
  --bs-light-light: #FFFFFF;
  --bs-light-dark: #F5F5F5;
  
  /* Dark Colors - Midnight Blue */
  --bs-dark: #191970;
  --bs-dark-rgb: 25, 25, 112;
  --bs-dark-light: #483D8B;
  --bs-dark-dark: #000080;

  /* Store items colors */
    --usa-blue: #002868;
  --old-glory-red: #B22234;
  --golden-yellow: #FFD700;
}

/* 
===========================================
COLOR SCHEME 2: Dark Professional Theme
===========================================
*/
:root.theme-dark-professional {
  /* Primary Colors - Deep Purple */
  --bs-primary: #6f42c1;
  --bs-primary-rgb: 111, 66, 193;
  --bs-primary-light: #8f6bc8;
  --bs-primary-dark: #5a2a9b;
  
  /* Secondary Colors - Charcoal Gray */
  --bs-secondary: #495057;
  --bs-secondary-rgb: 73, 80, 87;
  --bs-secondary-light: #6c757d;
  --bs-secondary-dark: #343a40;
  
  /* Success Colors - Modern Green */
  --bs-success: #20c997;
  --bs-success-rgb: 32, 201, 151;
  --bs-success-light: #40d5aa;
  --bs-success-dark: #1aa179;
  
  /* Info Colors - Dark Gray */
  --bs-info: #222831;
  --bs-info-rgb: 34, 40, 49;
  --bs-info-light: #393E46;
  --bs-info-dark: #1B1E23;
  
  /* Warning Colors - Amber */
  --bs-warning: #F1C40F;
  --bs-warning-rgb: 241, 196, 15;
  --bs-warning-light: #F4D03F;
  --bs-warning-dark: #D4AC0D;
  
  /* Danger Colors - Olive Gold */
  --bs-danger: #bcb21d;
  --bs-danger-rgb: 188, 178, 29;
  --bs-danger-light: #d4ca47;
  --bs-danger-dark: #9a9218;
  
  /* Light Colors - Off White */
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-light-light: #ffffff;
  --bs-light-dark: #e9ecef;
  
  /* Dark Colors - Rich Black */
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;
  --bs-dark-light: #495057;
  --bs-dark-dark: #000000;

  /* Custom theme colors */
  --theme-accent: #6f42c1;
  --theme-secondary: #495057;
  --theme-highlight: #20c997;
}

/* 
===========================================
COLOR SCHEME 3: Modern Ocean Theme
===========================================
*/
:root.theme-modern-ocean {
  /* Primary Colors - Ocean Blue */
  --bs-primary: #0077be;
  --bs-primary-rgb: 0, 119, 190;
  --bs-primary-light: #3399d4;
  --bs-primary-dark: #005a8f;
  
  /* Secondary Colors - Slate Blue */
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-light: #94a3b8;
  --bs-secondary-dark: #475569;
  
  /* Success Colors - Emerald */
  --bs-success: #10b981;
  --bs-success-rgb: 16, 185, 129;
  --bs-success-light: #34d399;
  --bs-success-dark: #059669;
  
  /* Info Colors - Cyan */
  --bs-info: #06b6d4;
  --bs-info-rgb: 6, 182, 212;
  --bs-info-light: #22d3ee;
  --bs-info-dark: #0891b2;
  
  /* Warning Colors - Sunset Orange */
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-light: #fbbf24;
  --bs-warning-dark: #d97706;
  
  /* Danger Colors - Coral Red */
  --bs-danger: #049093;
  --bs-danger-rgb: 4, 144, 147;
  --bs-danger-light: #06d6d9;
  --bs-danger-dark: #005e60;
  
  /* Light Colors - Sea Foam */
  --bs-light: #f0fdfa;
  --bs-light-rgb: 240, 253, 250;
  --bs-light-light: #ffffff;
  --bs-light-dark: #ccfbf1;
  
  /* Dark Colors - Deep Sea */
  --bs-dark: #0f172a;
  --bs-dark-rgb: 15, 23, 42;
  --bs-dark-light: #334155;
  --bs-dark-dark: #020617;

  /* Custom theme colors */
  --theme-accent: #0077be;
  --theme-secondary: #64748b;
  --theme-highlight: #10b981;
}

/* 
===========================================
COLOR SCHEME 4: Cyberpunk Neon Theme
===========================================
*/
:root.theme-cyberpunk-neon {
  /* Primary Colors - Electric Purple */
  --bs-primary: #8b5cf6;
  --bs-primary-rgb: 139, 92, 246;
  --bs-primary-light: #a78bfa;
  --bs-primary-dark: #7c3aed;
  
  /* Secondary Colors - Steel Gray */
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-light: #94a3b8;
  --bs-secondary-dark: #475569;
  
  /* Success Colors - Neon Green */
  --bs-success: #00ff88;
  --bs-success-rgb: 0, 255, 136;
  --bs-success-light: #4ade80;
  --bs-success-dark: #00cc6a;
  
  /* Info Colors - Cyber Blue */
  --bs-info: #00d4ff;
  --bs-info-rgb: 0, 212, 255;
  --bs-info-light: #38bdf8;
  --bs-info-dark: #0284c7;
  
  /* Warning Colors - Electric Orange */
  --bs-warning: #ff6b35;
  --bs-warning-rgb: 255, 107, 53;
  --bs-warning-light: #fb7185;
  --bs-warning-dark: #dc2626;
  
  /* Danger Colors - Hot Pink */
  --bs-danger: #ff0080;
  --bs-danger-rgb: 255, 0, 128;
  --bs-danger-light: #f472b6;
  --bs-danger-dark: #be185d;
  
  /* Light Colors - Dark Gray */
  --bs-light: #f0fdfa;
  --bs-light-rgb: 240, 253, 250;
  --bs-light-light: #ffffff;
  --bs-light-dark: #ccfbf1;

  
  /* Dark Colors - Matrix Black */
  --bs-dark: #000000;
  --bs-dark-rgb: 0, 0, 0;
  --bs-dark-light: #434446;
  --bs-dark-dark: #000000;

  /* Custom theme colors */
  --theme-accent: #8b5cf6;
  --theme-secondary: #64748b;
  --theme-highlight: #00ff88;
}

/* 
===========================================
COLOR SCHEME 5: Sunset Gradient Theme
===========================================
*/
:root.theme-sunset-gradient {
  /* Primary Colors - Coral Pink */
  --bs-primary: #ff6b9d;
  --bs-primary-rgb: 255, 107, 157;
  --bs-primary-light: #ff8fab;
  --bs-primary-dark: #e11d48;
  
  /* Secondary Colors - Warm Gray */
  --bs-secondary: #9ca3af;
  --bs-secondary-rgb: 156, 163, 175;
  --bs-secondary-light: #d1d5db;
  --bs-secondary-dark: #6b7280;
  
  /* Success Colors - Mint Green */
  --bs-success: #34d399;
  --bs-success-rgb: 52, 211, 153;
  --bs-success-light: #6ee7b7;
  --bs-success-dark: #059669;
  
  /* Info Colors - Sky Blue */
  --bs-info: #60a5fa;
  --bs-info-rgb: 96, 165, 250;
  --bs-info-light: #93c5fd;
  --bs-info-dark: #2563eb;
  
  /* Warning Colors - Peach */
  --bs-warning: #fb923c;
  --bs-warning-rgb: 251, 146, 60;
  --bs-warning-light: #fdba74;
  --bs-warning-dark: #ea580c;
  
  /* Danger Colors - Magenta */
  --bs-danger: #d946ef;
  --bs-danger-rgb: 217, 70, 239;
  --bs-danger-light: #e879f9;
  --bs-danger-dark: #a21caf;
  
  /* Light Colors - Cream */
  --bs-light: #fef3c7;
  --bs-light-rgb: 254, 243, 199;
  --bs-light-light: #ffffff;
  --bs-light-dark: #fed7aa;
  
  /* Dark Colors - Deep Purple */
  --bs-dark: #581c87;
  --bs-dark-rgb: 88, 28, 135;
  --bs-dark-light: #7c3aed;
  --bs-dark-dark: #3b0764;

  /* Custom theme colors */
  --theme-accent: #ff6b9d;
  --theme-secondary: #9ca3af;
  --theme-highlight: #34d399;
}

/* 
===========================================
COLOR SCHEME 6: Forest Earth Theme
===========================================
*/
:root.theme-forest-earth {
  /* Primary Colors - Sage Green */
  --bs-primary: #84cc16;
  --bs-primary-rgb: 132, 204, 22;
  --bs-primary-light: #a3e635;
  --bs-primary-dark: #65a30d;
  
  /* Secondary Colors - Warm Brown */
  --bs-secondary: #a3653c;
  --bs-secondary-rgb: 163, 101, 60;
  --bs-secondary-light: #d2691e;
  --bs-secondary-dark: #8b4513;
  
  /* Success Colors - Forest Green */
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-light: #22c55e;
  --bs-success-dark: #15803d;
  
  /* Info Colors - Teal */
  --bs-info: #0d9488;
  --bs-info-rgb: 13, 148, 136;
  --bs-info-light: #14b8a6;
  --bs-info-dark: #0f766e;
  
  /* Warning Colors - Amber */
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-light: #fbbf24;
  --bs-warning-dark: #d97706;
  
  /* Danger Colors - Terracotta */
  --bs-danger: #dc4c40;
  --bs-danger-rgb: 220, 76, 64;
  --bs-danger-light: #ef5350;
  --bs-danger-dark: #c62828;
  
  /* Light Colors - Cream Beige */
  --bs-light: #f5f5dc;
  --bs-light-rgb: 245, 245, 220;
  --bs-light-light: #ffffff;
  --bs-light-dark: #f0e68c;
  
  /* Dark Colors - Deep Forest */
  --bs-dark: #2d5016;
  --bs-dark-rgb: 45, 80, 22;
  --bs-dark-light: #365314;
  --bs-dark-dark: #1a2e05;

  /* Custom theme colors */
  --theme-accent: #84cc16;
  --theme-secondary: #a3653c;
  --theme-highlight: #16a34a;
}

/* 
===========================================
COLOR SCHEME 7: Cosmic Purple Theme
===========================================
*/
:root.theme-cosmic-purple {
  /* Primary Colors - Cosmic Purple */
  --bs-primary: #a855f7;
  --bs-primary-rgb: 168, 85, 247;
  --bs-primary-light: #c084fc;
  --bs-primary-dark: #9333ea;
  
  /* Secondary Colors - Galaxy Gray */
  --bs-secondary: #71717a;
  --bs-secondary-rgb: 113, 113, 122;
  --bs-secondary-light: #a1a1aa;
  --bs-secondary-dark: #52525b;
  
  /* Success Colors - Starlight Blue */
  --bs-success: #3b82f6;
  --bs-success-rgb: 59, 130, 246;
  --bs-success-light: #60a5fa;
  --bs-success-dark: #2563eb;
  
  /* Info Colors - Nebula Cyan */
  --bs-info: #06d6a0;
  --bs-info-rgb: 6, 214, 160;
  --bs-info-light: #34d399;
  --bs-info-dark: #059669;
  
  /* Warning Colors - Solar Gold */
  --bs-warning: #ffd60a;
  --bs-warning-rgb: 255, 214, 10;
  --bs-warning-light: #ffe066;
  --bs-warning-dark: #ffb700;
  
  /* Danger Colors - Mars Red */
  --bs-danger: #ff4757;
  --bs-danger-rgb: 255, 71, 87;
  --bs-danger-light: #ff6b7a;
  --bs-danger-dark: #ff3742;
  
  /* Light Colors - Stardust */
  --bs-light: #f8fafc;
  --bs-light-rgb: 248, 250, 252;
  --bs-light-light: #ffffff;
  --bs-light-dark: #e2e8f0;
  
  /* Dark Colors - Deep Space */
  --bs-dark: #1e1b4b;
  --bs-dark-rgb: 30, 27, 75;
  --bs-dark-light: #312e81;
  --bs-dark-dark: #0f0f23;

  /* Custom theme colors */
  --theme-accent: #a855f7;
  --theme-secondary: #71717a;
  --theme-highlight: #3b82f6;
}

/* 
===========================================
COLOR SCHEME 8: Retro Vaporwave Theme
===========================================
*/
:root.theme-retro-vaporwave {
  /* Primary Colors - Vaporwave Pink */
  --bs-primary: #ff006e;
  --bs-primary-rgb: 255, 0, 110;
  --bs-primary-light: #ff4081;
  --bs-primary-dark: #c2185b;
  
  /* Secondary Colors - Neon Purple */
  --bs-secondary: #8338ec;
  --bs-secondary-rgb: 131, 56, 236;
  --bs-secondary-light: #9c4dcc;
  --bs-secondary-dark: #6a1b9a;
  
  /* Success Colors - Electric Lime */
  --bs-success: #ccff00;
  --bs-success-rgb: 204, 255, 0;
  --bs-success-light: #d4ff3a;
  --bs-success-dark: #9e9e00;
  
  /* Info Colors - Cyan Blue */
  --bs-info: #00f5ff;
  --bs-info-rgb: 0, 245, 255;
  --bs-info-light: #40e0d0;
  --bs-info-dark: #008b8b;
  
  /* Warning Colors - Sunset Orange */
  --bs-warning: #ff8500;
  --bs-warning-rgb: 255, 133, 0;
  --bs-warning-light: #ffa726;
  --bs-warning-dark: #e65100;
  
  /* Danger Colors - Hot Magenta */
  --bs-danger: #ff073a;
  --bs-danger-rgb: 255, 7, 58;
  --bs-danger-light: #ff5722;
  --bs-danger-dark: #d32f2f;
  
  /* Light Colors - Soft Pink */
  --bs-light: #ffe0f0;
  --bs-light-rgb: 255, 224, 240;
  --bs-light-light: #ffffff;
  --bs-light-dark: #ffc0cb;
  
  /* Dark Colors - Deep Purple */
  --bs-dark: #2d1b69;
  --bs-dark-rgb: 45, 27, 105;
  --bs-dark-light: #512da8;
  --bs-dark-dark: #1a0033;

  /* Custom theme colors */
  --theme-accent: #ff006e;
  --theme-secondary: #8338ec;
  --theme-highlight: #ccff00;
}

/* 
===========================================
BACKGROUND COLORS
===========================================
*/
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-info { background-color: var(--bs-info) !important; }
.bg-warning { background-color: var(--bs-warning) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }

/* 
===========================================
TEXT COLORS
===========================================
*/
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-info { color: var(--bs-info) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }

/* 
===========================================
BORDER COLORS
===========================================
*/
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success { border-color: var(--bs-success) !important; }
.border-info { border-color: var(--bs-info) !important; }
.border-warning { border-color: var(--bs-warning) !important; }
.border-danger { border-color: var(--bs-danger) !important; }
.border-light { border-color: var(--bs-light) !important; }
.border-dark { border-color: var(--bs-dark) !important; }

/* 
===========================================
BUTTON STYLES
===========================================
*/

/* Primary Buttons */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background-color: var(--bs-primary-dark) !important;
  border-color: var(--bs-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-primary-rgb), 0.4) !important;
}

.btn-primary:focus, .btn-primary.focus {
  background-color: var(--bs-primary-dark) !important;
  border-color: var(--bs-primary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.5) !important;
}

.btn-primary:active, .btn-primary.active {
  background-color: var(--bs-primary-dark) !important;
  border-color: var(--bs-primary-dark) !important;
}

/* Secondary Buttons */
.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(var(--bs-secondary-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-secondary:hover {
  background-color: var(--bs-secondary-dark) !important;
  border-color: var(--bs-secondary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-secondary-rgb), 0.4) !important;
}

.btn-secondary:focus, .btn-secondary.focus {
  background-color: var(--bs-secondary-dark) !important;
  border-color: var(--bs-secondary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.5) !important;
}

/* Success Buttons */
.btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(var(--bs-success-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-success:hover {
  background-color: var(--bs-success-dark) !important;
  border-color: var(--bs-success-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-success-rgb), 0.4) !important;
}

.btn-success:focus, .btn-success.focus {
  background-color: var(--bs-success-dark) !important;
  border-color: var(--bs-success-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.5) !important;
}

/* Info Buttons */
.btn-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(var(--bs-info-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-info:hover {
  background-color: var(--bs-info-dark) !important;
  border-color: var(--bs-info-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-info-rgb), 0.4) !important;
}

.btn-info:focus, .btn-info.focus {
  background-color: var(--bs-info-dark) !important;
  border-color: var(--bs-info-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.5) !important;
}

/* Warning Buttons */
.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--bs-dark) !important;
  box-shadow: 0 4px 8px rgba(var(--bs-warning-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-warning:hover {
  background-color: var(--bs-warning-dark) !important;
  border-color: var(--bs-warning-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-warning-rgb), 0.4) !important;
}

.btn-warning:focus, .btn-warning.focus {
  background-color: var(--bs-warning-dark) !important;
  border-color: var(--bs-warning-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.5) !important;
}

/* Danger Buttons */
.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(var(--bs-danger-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-danger:hover {
  background-color: var(--bs-danger-dark) !important;
  border-color: var(--bs-danger-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-danger-rgb), 0.4) !important;
}

.btn-danger:focus, .btn-danger.focus {
  background-color: var(--bs-danger-dark) !important;
  border-color: var(--bs-danger-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.5) !important;
}

/* Light Buttons */
.btn-light {
  background-color: var(--bs-light) !important;
  border-color: var(--bs-light-dark) !important;
  color: var(--bs-dark) !important;
  box-shadow: 0 4px 8px rgba(var(--bs-light-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-light:hover {
  background-color: var(--bs-light-dark) !important;
  border-color: var(--bs-light-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3) !important;
}

/* Dark Buttons */
.btn-dark {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-dark) !important;
  color: white !important;
  box-shadow: 0 4px 8px rgba(var(--bs-dark-rgb), 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-dark:hover {
  background-color: var(--bs-dark-light) !important;
  border-color: var(--bs-dark-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-dark-rgb), 0.4) !important;
}

/* 
===========================================
OUTLINE BUTTON STYLES
===========================================
*/
.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.btn-outline-secondary {
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-secondary-rgb), 0.3) !important;
}

.btn-outline-success {
  color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-success:hover {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-success-rgb), 0.3) !important;
}

.btn-outline-info {
  color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-info:hover {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-info-rgb), 0.3) !important;
}

.btn-outline-warning {
  color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-warning:hover {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: var(--bs-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-warning-rgb), 0.3) !important;
}

.btn-outline-danger {
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-danger:hover {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(var(--bs-danger-rgb), 0.3) !important;
}

/* 
===========================================
ALERT STYLES
===========================================
*/
.alert-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
  color: var(--bs-primary-dark) !important;
}

.alert-secondary {
  background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
  border-color: rgba(var(--bs-secondary-rgb), 0.3) !important;
  color: var(--bs-secondary-dark) !important;
}

.alert-success {
  background-color: rgba(var(--bs-success-rgb), 0.1) !important;
  border-color: rgba(var(--bs-success-rgb), 0.3) !important;
  color: var(--bs-success-dark) !important;
}

.alert-info {
  background-color: rgba(var(--bs-info-rgb), 0.1) !important;
  border-color: rgba(var(--bs-info-rgb), 0.3) !important;
  color: var(--bs-info-dark) !important;
}

.alert-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
  border-color: rgba(var(--bs-warning-rgb), 0.3) !important;
  color: var(--bs-warning-dark) !important;
}

.alert-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
  border-color: rgba(var(--bs-danger-rgb), 0.3) !important;
  color: var(--bs-danger-dark) !important;
}

.alert-light {
  background-color: var(--bs-light) !important;
  border-color: var(--bs-light-dark) !important;
  color: var(--bs-dark) !important;
}

.alert-dark {
  background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
  border-color: rgba(var(--bs-dark-rgb), 0.3) !important;
  color: var(--bs-dark) !important;
}

/* 
===========================================
FORM CONTROL STYLES
===========================================
*/
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  border-color: var(--bs-primary) !important;
}

.form-control.border-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  border-color: var(--bs-primary) !important;
}

.form-control.border-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-secondary-rgb), 0.25) !important;
  border-color: var(--bs-secondary) !important;
}

.form-control.border-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25) !important;
  border-color: var(--bs-success) !important;
}

.form-control.border-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-info-rgb), 0.25) !important;
  border-color: var(--bs-info) !important;
}

.form-control.border-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.25) !important;
  border-color: var(--bs-warning) !important;
}

.form-control.border-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
  border-color: var(--bs-danger) !important;
}

/* 
===========================================
BADGE STYLES
===========================================
*/
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
  color: white !important;
}

.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: white !important;
}

.badge.bg-success {
  background-color: var(--bs-success) !important;
  color: white !important;
}

.badge.bg-info {
  background-color: var(--bs-info) !important;
  color: white !important;
}

.badge.bg-warning {
  background-color: var(--bs-warning) !important;
  color: var(--bs-dark) !important;
}

.badge.bg-danger {
  background-color: var(--bs-danger) !important;
  color: white !important;
}

.badge.bg-light {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark) !important;
}

.badge.bg-dark {
  background-color: var(--bs-dark) !important;
  color: white !important;
}

/* 
===========================================
PROGRESS BAR STYLES
===========================================
*/
.progress-bar {
  background-color: var(--bs-primary) !important;
}

.progress-bar.bg-primary {
  background-color: var(--bs-primary) !important;
}

.progress-bar.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.progress-bar.bg-success {
  background-color: var(--bs-success) !important;
}

.progress-bar.bg-info {
  background-color: var(--bs-info) !important;
}

.progress-bar.bg-warning {
  background-color: var(--bs-warning) !important;
}

.progress-bar.bg-danger {
  background-color: var(--bs-danger) !important;
}

/* 
===========================================
LINK STYLES
===========================================
*/
a {
  color: var(--bs-primary) !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--bs-primary-dark) !important;
}

footer.bg-dark a:hover {
  color: var(--bs-warning-dark) !important;
}
.link-primary {
  color: var(--bs-primary) !important;
}

.link-primary:hover {
  color: var(--bs-primary-dark) !important;
}

.link-secondary {
  color: var(--bs-secondary) !important;
}

.link-secondary:hover {
  color: var(--bs-secondary-dark) !important;
}

.link-success {
  color: var(--bs-success) !important;
}

.link-success:hover {
  color: var(--bs-success-dark) !important;
}

.link-info {
  color: var(--bs-info) !important;
}

.link-info:hover {
  color: var(--bs-info-dark) !important;
}

.link-warning {
  color: var(--bs-warning) !important;
}

.link-warning:hover {
  color: var(--bs-warning-dark) !important;
}

.link-danger {
  color: var(--bs-danger) !important;
}

.link-danger:hover {
  color: var(--bs-danger-dark) !important;
}

/* 
===========================================
CARD STYLES WITH ENHANCED SHADOWS
===========================================
*/
.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

.card-header.bg-primary {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-light)) !important;
  border-bottom: 3px solid var(--bs-primary-dark) !important;
}

.card-header.bg-secondary {
  background: linear-gradient(135deg, var(--bs-secondary), var(--bs-secondary-light)) !important;
  border-bottom: 3px solid var(--bs-secondary-dark) !important;
}

.card-header.bg-success {
  background: linear-gradient(135deg, var(--bs-success), var(--bs-success-light)) !important;
  border-bottom: 3px solid var(--bs-success-dark) !important;
}

.card-header.bg-info {
  background: linear-gradient(135deg, var(--bs-info), var(--bs-info-light)) !important;
  border-bottom: 3px solid var(--bs-info-dark) !important;
}

.card-header.bg-warning {
  background: linear-gradient(135deg, var(--bs-warning), var(--bs-warning-light)) !important;
  border-bottom: 3px solid var(--bs-warning-dark) !important;
}

.card-header.bg-danger {
  background: linear-gradient(135deg, var(--bs-danger), var(--bs-danger-light)) !important;
  border-bottom: 3px solid var(--bs-danger-dark) !important;
}

/* 
===========================================
NAVBAR STYLES
===========================================
*/
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
}

.navbar-nav .nav-link:hover {
  color: var(--bs-warning-dark) !important;
  transform: translateY(-1px) !important;
}

.navbar.bg-primary {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-light)) !important;
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.navbar.bg-dark {
  background: linear-gradient(135deg, var(--bs-dark), var(--bs-dark-light)) !important;
  box-shadow: 0 4px 12px rgba(var(--bs-dark-rgb), 0.3) !important;
}

/* 
===========================================
CUSTOM UTILITY CLASSES
===========================================
*/
.shadow-primary {
  box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.shadow-secondary {
  box-shadow: 0 4px 15px rgba(var(--bs-secondary-rgb), 0.3) !important;
}

.shadow-success {
  box-shadow: 0 4px 15px rgba(var(--bs-success-rgb), 0.3) !important;
}

.shadow-info {
  box-shadow: 0 4px 15px rgba(var(--bs-info-rgb), 0.3) !important;
}

.shadow-warning {
  box-shadow: 0 4px 15px rgba(var(--bs-warning-rgb), 0.3) !important;
}

.shadow-danger {
  box-shadow: 0 4px 15px rgba(var(--bs-danger-rgb), 0.3) !important;
}

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-light)) !important;
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--bs-secondary), var(--bs-secondary-light)) !important;
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--bs-success), var(--bs-success-light)) !important;
}

.bg-gradient-info {
  background: linear-gradient(135deg, var(--bs-info), var(--bs-info-light)) !important;
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--bs-warning), var(--bs-warning-light)) !important;
}

.bg-gradient-danger {
  background: linear-gradient(135deg, var(--bs-danger), var(--bs-danger-light)) !important;
}

/* 
===========================================
RESPONSIVE ADJUSTMENTS
===========================================
*/
@media (max-width: 767.98px) {
  .btn {
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
  }
  
  .card {
    margin-bottom: 1rem !important;
  }
  
  .card:hover {
    transform: none !important;
  }
  
  .btn:hover {
    transform: none !important;
  }
}

/* 
===========================================
ACCESSIBILITY ENHANCEMENTS
===========================================
*/
.btn:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

.form-control:focus-visible {
  outline: 2px solid var(--bs-primary) !important;
  outline-offset: 2px !important;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --bs-primary: #0056b3;
    --bs-success: #155724;
    --bs-danger: #721c24;
    --bs-warning: #856404;
    --bs-info: #0c5460;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  
  .btn:hover {
    transform: none !important;
  }
  
  .card:hover {
    transform: none !important;
  }
}

/* View store item colors */
.patriot-primary {
  background-color: var(--usa-blue) !important;
  border-color: var(--usa-blue) !important;
}

.patriot-secondary {
  background-color: var(--old-glory-red) !important;
  border-color: var(--old-glory-red) !important;
}

.patriot-accent {
  background-color: var(--golden-yellow) !important;
  color: var(--usa-blue) !important;
}

.text-usa-blue { color: var(--usa-blue) !important; }
.text-old-glory-red { color: var(--old-glory-red) !important; }
.text-golden-yellow { color: var(--golden-yellow) !important; }

.store-card {
  border: 2px solid var(--usa-blue);
  box-shadow: 0 4px 8px rgba(0, 40, 104, 0.1);
}

.featured-badge {
  background: linear-gradient(45deg, var(--old-glory-red), var(--golden-yellow));
  color: white;
  font-weight: bold;
}

.item-highlight {
  border-left: 4px solid var(--golden-yellow);
  background-color: rgba(255, 215, 0, 0.1);
}

/* 
===========================================
THEME SWITCHING UTILITIES
===========================================
*/

/* Theme selector dropdown styling */
.theme-selector {
  position: relative;
  display: inline-block;
}

.theme-selector select {
  background-color: var(--bs-light);
  border: 1px solid var(--bs-secondary);
  border-radius: 0.375rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  color: var(--bs-dark);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.theme-selector select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  outline: 0;
}

.theme-selector select:hover {
  border-color: var(--bs-primary);
}

/* Theme preview badges */
.theme-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  margin-right: 0.5rem;
}

.theme-preview.patriotic {
  background: linear-gradient(90deg, #002868, #B22234, #FFD700);
  color: white;
}

.theme-preview.dark-professional {
  background: linear-gradient(90deg, #6f42c1, #495057, #20c997);
  color: white;
}

.theme-preview.modern-ocean {
  background: linear-gradient(90deg, #0077be, #64748b, #10b981);
  color: white;
}

/* 
===========================================
THEME SWITCHING JAVASCRIPT
===========================================

To implement theme switching, add this JavaScript to your pages:

<script>
// Theme switching functionality
function switchTheme(themeName) {
  const root = document.documentElement;
  
  // Remove all existing theme classes
  root.classList.remove('theme-dark-professional', 'theme-modern-ocean');
  
  // Add the selected theme class
  if (themeName === 'dark-professional') {
    root.classList.add('theme-dark-professional');
  } else if (themeName === 'modern-ocean') {
    root.classList.add('theme-modern-ocean');
  }
  // Default theme (patriotic) doesn't need a class
  
  // Save theme preference
  localStorage.setItem('selectedTheme', themeName);
  
  // Optional: Trigger theme change event
  window.dispatchEvent(new CustomEvent('themeChanged', { 
    detail: { theme: themeName } 
  }));
}

// Load saved theme on page load
function loadSavedTheme() {
  const savedTheme = localStorage.getItem('selectedTheme');
  if (savedTheme) {
    switchTheme(savedTheme);
    // Update theme selector if it exists
    const themeSelector = document.getElementById('themeSelector');
    if (themeSelector) {
      themeSelector.value = savedTheme;
    }
  }
}

// Initialize theme on DOM load
document.addEventListener('DOMContentLoaded', loadSavedTheme);
</script>

HTML for theme selector:
<div class="theme-selector">
  <label for="themeSelector">Color Theme:</label>
  <select id="themeSelector" onchange="switchTheme(this.value)">
    <option value="patriotic">🇺🇸 American Patriotic</option>
    <option value="dark-professional">🌙 Dark Professional</option>
    <option value="modern-ocean">🌊 Modern Ocean</option>
  </select>
</div>

===========================================
*/