/* CloudXM Custom Color Theme */
:root {
  --cloudxm-primary-bg: #0B0F24;
  --cloudxm-text-primary: #FFFFFF;
  --cloudxm-accent-primary: #007CF0;
  /* A trustworthy digital blue */
  --cloudxm-accent-hover: #7A00F4;
  --cloudxm-neutral-secondary: #8E8E93;
  --cloudxm-bg-light: #F8F9FB;
  --cloudxm-text-secondary: #A1A1AA;
  --cloudxm-border-default: #E4E4E7;
  --cloudxm-success: #22C55E;
  --cloudxm-warning: #FACC15;
  --cloudxm-error: #EF4444;
  --cloudxm-overlay: rgba(0, 0, 0, 0.5);
  --cloudxm-shadow: rgba(0, 0, 0, 0.1);
}

/* Override Tailwind colors with CloudXM palette */
.bg-primary {
  background-color: var(--cloudxm-primary-bg);
}

.bg-accent {
  background-color: var(--cloudxm-accent-primary);
}

.bg-accent-hover {
  background-color: var(--cloudxm-accent-hover);
}

.bg-light {
  background-color: var(--cloudxm-bg-light);
}

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

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

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

.text-primary {
  color: var(--cloudxm-text-primary);
}

.text-secondary {
  color: var(--cloudxm-text-secondary);
}

.text-accent {
  color: var(--cloudxm-accent-primary);
}

.text-accent-hover {
  color: var(--cloudxm-accent-hover);
}

.text-success {
  color: var(--cloudxm-success);
}

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

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

.border-default {
  border-color: var(--cloudxm-border-default);
}

.border-accent {
  border-color: var(--cloudxm-accent-primary);
}

/* Hover states */
.hover\:bg-accent-hover:hover {
  background-color: var(--cloudxm-accent-hover);
}

.hover\:bg-success-hover:hover {
  background-color: #16a34a;
}

.hover\:text-accent:hover {
  color: var(--cloudxm-accent-primary);
}

/* Custom gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--cloudxm-primary-bg) 0%, var(--cloudxm-accent-primary) 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--cloudxm-accent-primary) 0%, var(--cloudxm-accent-hover) 100%);
}

/* Shadow with CloudXM colors */
.shadow-cloudxm {
  box-shadow: 0 4px 6px -1px var(--cloudxm-shadow), 0 2px 4px -1px var(--cloudxm-shadow);
}

.shadow-cloudxm-lg {
  box-shadow: 0 10px 15px -3px var(--cloudxm-shadow), 0 4px 6px -2px var(--cloudxm-shadow);
}

/* Focus states with CloudXM accent */
a:focus,
button:focus {
  outline: 2px solid var(--cloudxm-accent-primary);
  outline-offset: 2px;
}

/* Custom button styles */
.btn-primary {
  background-color: var(--cloudxm-accent-primary);
  color: var(--cloudxm-text-primary);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--cloudxm-accent-hover);
  transform: translateY(-1px);
}

.btn-success {
  background-color: var(--cloudxm-success);
  color: var(--cloudxm-text-primary);
  transition: all 0.2s ease;
}

.btn-success:hover {
  background-color: #16a34a;
  transform: translateY(-1px);
}

/* Card styles with CloudXM theme */
.card-cloudxm {
  background-color: var(--cloudxm-text-primary);
  border: 1px solid var(--cloudxm-border-default);
  box-shadow: var(--cloudxm-shadow);
  border-radius: 0.5rem;
}

.card-cloudxm:hover {
  box-shadow: 0 10px 15px -3px var(--cloudxm-shadow), 0 4px 6px -2px var(--cloudxm-shadow);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Header with CloudXM primary background */
.header-cloudxm {
  background-color: var(--cloudxm-primary-bg);
  color: var(--cloudxm-text-primary);
}

/* Section backgrounds */
.section-light {
  background-color: var(--cloudxm-bg-light);
}

.section-primary {
  background-color: var(--cloudxm-primary-bg);
  color: var(--cloudxm-text-primary);
}

/* Stats/metrics styling */
.stat-number {
  color: var(--cloudxm-accent-primary);
  font-weight: 700;
}

/* Service cards with accent colors */
.service-card-accent {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(122, 0, 244, 0.1) 100%);
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.service-card-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.service-card-warning {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(250, 204, 21, 0.2);
}