/**
 * Color System
 * TICKET-025: Color System Design & Documentation
 * Semantic color system with WCAG AA compliance
 */

:root {
  /* Primary Colors - Game Theme */
  --color-primary: #00ffff; /* Cyan - Primary accent */
  --color-primary-dark: #009999;
  --color-primary-light: #33ffff;
  --color-primary-bg: rgba(0, 255, 255, 0.1);

  /* Secondary Colors */
  --color-secondary: #00ff00; /* Green - Secondary accent */
  --color-secondary-dark: #009900;
  --color-secondary-light: #33ff33;

  /* Background Colors */
  --color-bg-primary: rgba(0, 20, 0, 0.95); /* Dark green background */
  --color-bg-secondary: rgba(0, 30, 0, 0.9);
  --color-bg-tertiary: rgba(0, 40, 0, 0.85);
  --color-bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text Colors */
  --color-text-primary: #00ffff; /* Cyan text */
  --color-text-secondary: #00ff00; /* Green text */
  --color-text-tertiary: #88ff88; /* Light green text */
  --color-text-muted: #66aa66; /* Muted green */
  --color-text-inverse: #000000; /* Black for light backgrounds */

  /* Semantic Colors - Success */
  --color-success: #00ff00; /* Green */
  --color-success-dark: #00cc00;
  --color-success-light: #33ff33;
  --color-success-bg: rgba(0, 255, 0, 0.1);
  --color-success-text: #00ff00;

  /* Semantic Colors - Error */
  --color-error: #ff0000; /* Red */
  --color-error-dark: #cc0000;
  --color-error-light: #ff3333;
  --color-error-bg: rgba(255, 0, 0, 0.1);
  --color-error-text: #ff0000;

  /* Semantic Colors - Warning */
  --color-warning: #ffaa00; /* Orange */
  --color-warning-dark: #cc8800;
  --color-warning-light: #ffcc33;
  --color-warning-bg: rgba(255, 170, 0, 0.1);
  --color-warning-text: #ffaa00;

  /* Semantic Colors - Info */
  --color-info: #00aaff; /* Blue */
  --color-info-dark: #0088cc;
  --color-info-light: #33bbff;
  --color-info-bg: rgba(0, 170, 255, 0.1);
  --color-info-text: #00aaff;

  /* Border Colors */
  --color-border-primary: #00ffff;
  --color-border-secondary: #00ff00;
  --color-border-muted: #66aa66;

  /* Interactive States */
  --color-hover: #33ffff;
  --color-active: #009999;
  --color-focus: #00ffff;
  --color-disabled: #66aa66;
  --color-disabled-bg: rgba(102, 170, 102, 0.2);

  /* Status Colors */
  --color-status-active: #00ff00;
  --color-status-inactive: #66aa66;
  --color-status-pending: #ffaa00;
  --color-status-complete: #00ffff;

  /* Shadow Colors */
  --color-shadow-primary: rgba(0, 255, 255, 0.5);
  --color-shadow-secondary: rgba(0, 255, 0, 0.3);
  --color-shadow-error: rgba(255, 0, 0, 0.3);

  /* Color Blind Mode Overrides (applied via class) */
  --color-blind-mode-success: #00aaff; /* Blue instead of green */
  --color-blind-mode-error: #ff00ff; /* Magenta instead of red */
  --color-blind-mode-warning: #ffff00; /* Yellow instead of orange */
}

/* Color Blind Mode Support */
.color-blind-mode {
  --color-success: var(--color-blind-mode-success);
  --color-success-dark: #0088cc;
  --color-success-light: #33bbff;
  --color-success-text: var(--color-blind-mode-success);

  --color-error: var(--color-blind-mode-error);
  --color-error-dark: #cc00cc;
  --color-error-light: #ff33ff;
  --color-error-text: var(--color-blind-mode-error);

  --color-warning: var(--color-blind-mode-warning);
  --color-warning-dark: #cccc00;
  --color-warning-light: #ffff33;
  --color-warning-text: var(--color-blind-mode-warning);
}

/* Utility Classes for Semantic Colors */
.text-success {
  color: var(--color-success-text);
}

.text-error {
  color: var(--color-error-text);
}

.text-warning {
  color: var(--color-warning-text);
}

.text-info {
  color: var(--color-info-text);
}

.bg-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
}

.bg-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
}

.bg-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.bg-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info);
}

.border-success {
  border-color: var(--color-success);
}

.border-error {
  border-color: var(--color-error);
}

.border-warning {
  border-color: var(--color-warning);
}

.border-info {
  border-color: var(--color-info);
}

/* Button Variants */
.btn-success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}

.btn-success:hover {
  background-color: var(--color-success-light);
  border-color: var(--color-success-light);
}

.btn-error {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}

.btn-error:hover {
  background-color: var(--color-error-light);
  border-color: var(--color-error-light);
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}

.btn-warning:hover {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning-light);
}

.btn-info {
  background-color: var(--color-info);
  color: var(--color-text-inverse);
  border-color: var(--color-info);
}

.btn-info:hover {
  background-color: var(--color-info-light);
  border-color: var(--color-info-light);
}

/* Status Indicators */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-indicator.active {
  background-color: var(--color-status-active);
  box-shadow: 0 0 4px var(--color-status-active);
}

.status-indicator.inactive {
  background-color: var(--color-status-inactive);
}

.status-indicator.pending {
  background-color: var(--color-status-pending);
  box-shadow: 0 0 4px var(--color-status-pending);
}

.status-indicator.complete {
  background-color: var(--color-status-complete);
  box-shadow: 0 0 4px var(--color-status-complete);
}

/* Message Boxes */
.message-box {
  padding: 12px 16px;
  border: 1px solid;
  border-radius: 4px;
  margin: 8px 0;
}

.message-box.success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.message-box.error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error-text);
}

.message-box.warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning-text);
}

.message-box.info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-info-text);
}

/* Accessibility: Ensure WCAG AA compliance */
/* All text colors meet 4.5:1 contrast ratio minimum */
/* Focus states are clearly visible */
*:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}