/**
 * Color Utility Classes
 * Color utilities using consolidated CSS variables
 */

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-inverse { color: var(--color-text-inverse); }
.text-link { color: var(--color-text-link); }

/* Brand Colors */
.text-brand-primary { color: var(--color-primary); }
.text-brand-secondary { color: var(--color-secondary); }
.text-brand-accent { color: var(--color-accent); }

/* System Colors */
.text-blue { color: var(--color-blue); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

/* Gray Scale Text */
.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }

/* Background Colors */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-overlay { background-color: var(--color-bg-overlay); }
.bg-dark { background-color: var(--color-bg-dark); }

/* Brand Background Colors */
.bg-brand-primary { background-color: var(--color-primary); }
.bg-brand-secondary { background-color: var(--color-secondary); }
.bg-brand-accent { background-color: var(--color-accent); }

/* System Background Colors */
.bg-blue { background-color: var(--color-blue); }
.bg-blue-light { background-color: var(--color-blue-light); }
.bg-success { background-color: var(--color-success); }
.bg-success-light { background-color: var(--color-success-light); }
.bg-warning { background-color: var(--color-warning); }
.bg-warning-light { background-color: var(--color-warning-light); }
.bg-error { background-color: var(--color-error); }
.bg-error-light { background-color: var(--color-error-light); }
.bg-info { background-color: var(--color-info); }
.bg-info-light { background-color: var(--color-info-light); }

/* Gray Scale Backgrounds */
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }

/* Transparent Background */
.bg-transparent { background-color: transparent; }

/* Border Colors */
.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }
.border-dark { border-color: var(--color-border-dark); }
.border-focus { border-color: var(--color-border-focus); }

/* Brand Border Colors */
.border-brand-primary { border-color: var(--color-primary); }
.border-brand-secondary { border-color: var(--color-secondary); }
.border-brand-accent { border-color: var(--color-accent); }

/* System Border Colors */
.border-blue { border-color: var(--color-blue); }
.border-success { border-color: var(--color-success); }
.border-warning { border-color: var(--color-warning); }
.border-error { border-color: var(--color-error); }
.border-info { border-color: var(--color-info); }

/* Gray Scale Borders */
.border-gray-50 { border-color: var(--color-gray-50); }
.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-gray-500 { border-color: var(--color-gray-500); }
.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-700 { border-color: var(--color-gray-700); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-gray-900 { border-color: var(--color-gray-900); }

/* Transparent Border */
.border-transparent { border-color: transparent; }

/* Hover State Colors */
.hover\:text-primary:hover { color: var(--color-text-primary); }
.hover\:text-secondary:hover { color: var(--color-text-secondary); }
.hover\:text-link:hover { color: var(--color-text-link-hover); }
.hover\:text-brand-primary:hover { color: var(--color-primary-hover); }
.hover\:text-brand-secondary:hover { color: var(--color-secondary-hover); }

.hover\:bg-primary:hover { background-color: var(--color-bg-primary); }
.hover\:bg-secondary:hover { background-color: var(--color-bg-secondary); }
.hover\:bg-brand-primary:hover { background-color: var(--color-primary-hover); }
.hover\:bg-brand-secondary:hover { background-color: var(--color-secondary-hover); }
.hover\:bg-blue:hover { background-color: var(--color-blue-hover); }
.hover\:bg-success:hover { background-color: var(--color-success-hover); }
.hover\:bg-warning:hover { background-color: var(--color-warning-hover); }
.hover\:bg-error:hover { background-color: var(--color-error-hover); }
.hover\:bg-info:hover { background-color: var(--color-info-hover); }

.hover\:border-focus:hover { border-color: var(--color-border-focus); }
.hover\:border-brand-primary:hover { border-color: var(--color-primary-hover); }
.hover\:border-blue:hover { border-color: var(--color-blue-hover); }

/* Focus State Colors */
.focus\:text-link:focus { color: var(--color-text-link-hover); }
.focus\:bg-brand-primary:focus { background-color: var(--color-primary-hover); }
.focus\:border-focus:focus { border-color: var(--color-border-focus); }

/* Active State Colors */
.active\:bg-brand-primary:active { background-color: var(--color-primary-dark); }
.active\:bg-brand-secondary:active { background-color: var(--color-secondary-dark); }
.active\:bg-blue:active { background-color: var(--color-blue-dark); }
.active\:bg-success:active { background-color: var(--color-success-dark); }
.active\:bg-warning:active { background-color: var(--color-warning-dark); }
.active\:bg-error:active { background-color: var(--color-error-dark); }
.active\:bg-info:active { background-color: var(--color-info-dark); }

/* Disabled State Colors */
.disabled\:text-gray-400:disabled { color: var(--color-gray-400); }
.disabled\:bg-gray-200:disabled { background-color: var(--color-gray-200); }
.disabled\:border-gray-200:disabled { border-color: var(--color-gray-200); }

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
}

.bg-gradient-blue {
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-hover));
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--color-success), var(--color-success-hover));
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning-hover));
}

.bg-gradient-error {
  background: linear-gradient(135deg, var(--color-error), var(--color-error-hover));
}

.bg-gradient-info {
  background: linear-gradient(135deg, var(--color-info), var(--color-info-hover));
}

/* Color opacity utilities */
.text-opacity-25 { color: rgba(var(--color-text-primary), 0.25); }
.text-opacity-50 { color: rgba(var(--color-text-primary), 0.5); }
.text-opacity-75 { color: rgba(var(--color-text-primary), 0.75); }

.bg-opacity-25 { background-color: rgba(var(--color-bg-primary), 0.25); }
.bg-opacity-50 { background-color: rgba(var(--color-bg-primary), 0.5); }
.bg-opacity-75 { background-color: rgba(var(--color-bg-primary), 0.75); }

/* Status indicator colors */
.status-active { 
  background-color: var(--color-success-light); 
  color: var(--color-success-dark); 
}

.status-warning { 
  background-color: var(--color-warning-light); 
  color: var(--color-warning-dark); 
}

.status-error { 
  background-color: var(--color-error-light); 
  color: var(--color-error-dark); 
}

.status-info { 
  background-color: var(--color-info-light); 
  color: var(--color-info-dark); 
}

.status-neutral { 
  background-color: var(--color-gray-100); 
  color: var(--color-gray-700); 
}