/* Cores personalizadas da Skala Code */
:root {
  --primary-blue: #2563EB;
  --primary-blue-dark: #1D4ED8;
  --primary-blue-light: #3B82F6;
  --accent-blue: #60A5FA;
  --light-blue: #DBEAFE;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-600: #4B5563;
  --gray-800: #1F2937;
  --gray-900: #111827;
}

/* Substituir amarelo por azul */
.bg-yellow-500 {
  background-color: var(--primary-blue) !important;
}

.text-yellow-500 {
  color: var(--primary-blue) !important;
}

.border-yellow-500 {
  border-color: var(--primary-blue) !important;
}

/* Hover states */
.bg-yellow-500:hover {
  background-color: var(--primary-blue-dark) !important;
}

.text-yellow-500:hover {
  color: var(--primary-blue-dark) !important;
}

/* Background moderno e claro */
.bg-cream {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* Cards com sombra suave */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.1), 0 10px 10px -5px rgba(37, 99, 235, 0.04) !important;
}

/* Texto mais moderno */
.text-darken {
  color: var(--gray-800) !important;
}

/* Botões com gradiente azul moderno */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3) !important;
}

/* Footer com azul escuro moderno */
footer {
  background: linear-gradient(135deg, var(--gray-900) 0%, #1E40AF 100%) !important;
}

/* Elementos flutuantes com azul */
.floating {
  animation: floating 3s ease-in-out infinite;
}

.floating-4 {
  animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Ícones dos cards com cores azuis */
.card-icon-1 {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
}

.card-icon-2 {
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
}

.card-icon-3 {
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
}

/* Navbar moderna */
.navbar {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

/* Elementos de destaque */
.bg-yellow-300 {
  background-color: var(--light-blue) !important;
  color: var(--primary-blue) !important;
}

/* Links hover */
a:hover {
  color: var(--primary-blue) !important;
  transition: color 0.3s ease;
}

/* Inputs modernos */
input[type="email"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

input[type="email"]:focus {
  border-color: var(--accent-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}