/**
 * Brand Color System - Modern Healthcare Design
 * 
 * Based on color theory for healthcare UX:
 * - Primary Cyan (#5ce1e6): Energy, freshness, medical cleanliness
 * - Secondary Blue (#7cbad1): Trust, calm, professionalism
 * - Accent Orange (#eb5d14): Vitality, warmth, call-to-action
 * - Neutral Black (#11110d): Sophistication, contrast, elegance
 */

/* Primary Brand Elements */
.text-brand-primary { color: var(--color-primary-200); }
.text-brand-secondary { color: var(--color-secondary-200); }
.text-brand-accent { color: var(--color-accent-200); }
.text-brand-dark { color: var(--color-neutral-900); }

.bg-brand-primary { background-color: var(--color-primary-200); }
.bg-brand-secondary { background-color: var(--color-secondary-200); }
.bg-brand-accent { background-color: var(--color-accent-200); }
.bg-brand-dark { background-color: var(--color-neutral-900); }

/* Modern Button Styles with Brand Colors */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-200), var(--color-primary-400));
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--duration-normal) var(--ease-smooth);
  box-shadow: var(--shadow-medium);
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(var(--lift-small));
  box-shadow: var(--shadow-large);
  background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
}

.btn-secondary {
  background: linear-gradient(135deg, var(--color-secondary-200), var(--color-secondary-400));
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--duration-normal) var(--ease-smooth);
  box-shadow: var(--shadow-medium);
  border: none;
  cursor: pointer;
}

.btn-secondary:hover {
  transform: translateY(var(--lift-small));
  box-shadow: var(--shadow-large);
  background: linear-gradient(135deg, var(--color-secondary-300), var(--color-secondary-500));
}

.btn-accent {
  background: linear-gradient(135deg, var(--color-accent-200), var(--color-accent-400));
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--duration-normal) var(--ease-smooth);
  box-shadow: var(--shadow-medium);
  border: none;
  cursor: pointer;
}

.btn-accent:hover {
  transform: translateY(var(--lift-small));
  box-shadow: var(--shadow-large);
  background: linear-gradient(135deg, var(--color-accent-300), var(--color-accent-500));
}

.btn-outline-primary {
  background: transparent;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-200);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all var(--duration-normal) var(--ease-smooth);
  cursor: pointer;
}

.btn-outline-primary:hover {
  background: var(--color-primary-200);
  color: white;
  transform: translateY(var(--lift-small));
}

/* Modern Card Styles */
.card-modern {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: all var(--duration-normal) var(--ease-smooth);
  border: 1px solid var(--color-neutral-200);
}

.card-modern:hover {
  transform: translateY(var(--lift-small));
  box-shadow: var(--shadow-colored);
  border-color: var(--color-primary-200);
}

.card-primary {
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-primary-100));
  border: 1px solid var(--color-primary-200);
}

.card-secondary {
  background: linear-gradient(135deg, var(--color-secondary-50), var(--color-secondary-100));
  border: 1px solid var(--color-secondary-200);
}

.card-accent {
  background: linear-gradient(135deg, var(--color-accent-50), var(--color-accent-100));
  border: 1px solid var(--color-accent-200);
}

/* Typography with Brand Colors */
.heading-primary {
  color: var(--color-neutral-900);
  font-weight: 700;
  line-height: 1.2;
}

.heading-secondary {
  color: var(--color-primary-600);
  font-weight: 600;
  line-height: 1.3;
}

.text-accent {
  color: var(--color-accent-600);
  font-weight: 500;
}

.text-muted {
  color: var(--color-neutral-600);
}

/* Status Indicators */
.status-success {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border: 1px solid #86efac;
}

.status-warning {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fbbf24;
}

.status-error {
  background: linear-gradient(135deg, #fecaca, #fca5a5);
  color: #991b1b;
  border: 1px solid #f87171;
}

.status-info {
  background: linear-gradient(135deg, var(--color-secondary-100), var(--color-secondary-200));
  color: var(--color-secondary-800);
  border: 1px solid var(--color-secondary-300);
}

/* Modern Form Elements */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-neutral-300);
  border-radius: 0.5rem;
  background: white;
  color: var(--color-neutral-800);
  transition: all var(--duration-normal) var(--ease-smooth);
  font-size: 1rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary-200);
  box-shadow: 0 0 0 3px rgba(92, 225, 230, 0.1);
}

.form-label {
  color: var(--color-neutral-700);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

/* Brand Accents */
.accent-line {
  height: 4px;
  background: linear-gradient(90deg, 
    var(--color-primary-200) 0%, 
    var(--color-secondary-200) 50%, 
    var(--color-accent-200) 100%);
  border-radius: 2px;
}

.accent-dot {
  width: 12px;
  height: 12px;
  background: var(--color-primary-200);
  border-radius: 50%;
  display: inline-block;
}

/* Responsive helpers with brand colors */
@media (max-width: 768px) {
  /* Only utility/explicit responsive buttons should be full width on mobile. */
  .btn-responsive,
  .btn-outline-primary {
    width: 100%;
    text-align: center;
  }

  .card-modern {
    padding: 1rem;
  }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  .card-modern {
    background: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
  }
  
  .form-input {
    background: var(--color-neutral-800);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-200);
  }
}