:root {
  --color-primary-100: #defced;
  --color-primary-200: #bef9e2;
  --color-primary-300: #9aeed4;
  --color-primary-400: #7bddc8;
  --color-primary-500: #52c7b9;
  --color-primary-600: #3baba8;
  --color-primary-700: #29888f;
  --color-primary-800: #1a6573;
  --color-primary-900: #0f4b5f;

  --color-background: #182d3d;
  --color-foreground: #ffffff;
  --color-muted: #9ca3af;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-primary-300),
    var(--color-primary-500)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary-500);
}

.btn-primary {
  background-color: var(--color-primary-500);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-600);
  transform: scale(1.02);
}