/**
 * Accessible Color Palette for Ghost Fossil
 * Based on the existing purple-blue gradient with better readability
 * 
 * Primary Colors:
 * - Deep Purple: #6A11CB (from gradient start)
 * - Royal Blue: #2575FC (from gradient end)
 * - Dark Purple: #4A0E8C (darker variant for text)
 * - Medium Blue: #0056B3 (Bootstrap primary variant)
 * 
 * Neutral Colors:
 * - Charcoal: #2C3E50 (readable dark)
 * - Slate: #495057 (Bootstrap gray-700)
 * - Light Gray: #F8F9FA (Bootstrap light)
 * - White: #FFFFFF
 * 
 * WCAG AA Compliant Combinations:
 * - Dark text on light backgrounds: #2C3E50 on #F8F9FA (contrast ratio: 9.8:1)
 * - White text on purple: #FFFFFF on #6A11CB (contrast ratio: 4.5:1)
 * - White text on blue: #FFFFFF on #2575FC (contrast ratio: 3.1:1 - use darker variant)
 */

:root {
  /* Primary Colors - Purple to Blue */
  --accessible-purple: #6A11CB;
  --accessible-purple-dark: #4A0E8C;
  --accessible-blue: #2575FC;
  --accessible-blue-dark: #0056B3;
  
  /* Gradient (kept from original) */
  --gradient-purple-blue: linear-gradient(135deg, rgb(106, 17, 203), rgb(37, 117, 252));
  --gradient-purple-blue-subtle: linear-gradient(135deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
  
  /* Neutral Colors */
  --accessible-charcoal: #2C3E50;
  --accessible-slate: #495057;
  --accessible-gray-light: #F8F9FA;
  --accessible-white: #FFFFFF;
  
  /* Semantic Colors */
  --accessible-primary: var(--accessible-purple-dark);
  --accessible-secondary: var(--accessible-blue-dark);
  --accessible-text-dark: var(--accessible-charcoal);
  --accessible-text-light: var(--accessible-white);
  --accessible-bg-light: var(--accessible-gray-light);
  
  /* Interactive States */
  --accessible-hover: #5A0F7A;
  --accessible-active: #3A0A5C;
  --accessible-focus-shadow: rgba(106, 17, 203, 0.25);
}

/* Button Styles with Accessible Colors */
.btn-accessible-primary {
  background: var(--gradient-purple-blue) !important;
  color: white !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  font-weight: 500;
}

.btn-accessible-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 8px var(--accessible-focus-shadow);
}

/* Alternative solid color button for better readability */
.btn-accessible-solid {
  background: var(--accessible-purple-dark) !important;
  color: white !important;
  border: none !important;
  font-weight: 500;
}

.btn-accessible-solid:hover {
  background: var(--accessible-hover) !important;
}

/* Outline button variant */
.btn-accessible-outline {
  background: transparent !important;
  color: var(--accessible-purple-dark) !important;
  border: 2px solid var(--accessible-purple-dark) !important;
  font-weight: 500;
}

.btn-accessible-outline:hover {
  background: var(--accessible-purple-dark) !important;
  color: white !important;
}

/* Progress bars and indicators */
.progress-accessible {
  background: var(--accessible-gray-light);
}

.progress-accessible .progress-bar {
  background: var(--gradient-purple-blue);
}

/* Cards with subtle gradient border */
.card-accessible {
  border: 1px solid transparent;
  background: white;
  background-clip: padding-box;
  position: relative;
}

.card-accessible::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  margin: -1px;
  border-radius: inherit;
  background: var(--gradient-purple-blue);
}

/* Text colors for readability */
.text-accessible-primary {
  color: var(--accessible-purple-dark) !important;
}

.text-accessible-secondary {
  color: var(--accessible-blue-dark) !important;
}

/* Badge styles */
.badge-accessible {
  background: var(--accessible-purple-dark) !important;
  color: white !important;
}

/* For sparklines and data visualization */
.sparkline-accessible {
  background: var(--gradient-purple-blue);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] {
  --accessible-text-dark: #E9ECEF;
  --accessible-bg-light: #212529;
  
  .btn-accessible-outline {
    color: var(--accessible-blue) !important;
    border-color: var(--accessible-blue) !important;
  }
  
  .btn-accessible-outline:hover {
    background: var(--accessible-blue) !important;
    color: var(--accessible-charcoal) !important;
  }
}

/* Remove old Agassi styles - for migration */
.btn-agassi,
.btn-agassi-a1,
.btn-agassi-a2,
.btn-agassi-a4 {
  /* Override with accessible gradient */
  background: var(--gradient-purple-blue) !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}