/* ==========================================================================
   FUASPI — ESTILOS OFICIALES Y SISTEMA VISUAL
   Fundación Asistente de Servicios Públicos Inteligentes
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Glacial+Indifference:wght@400;700&family=Inter:wght@300;400;500;600;700;800&family=Luckiest+Guy&display=swap');

:root {
  /* Paleta Cromática Oficial Refinada */
  --fuaspi-emerald: #0E7C5B;
  --fuaspi-deep: #0A5A42;
  --fuaspi-bg-light: #E9F4EF;
  --fuaspi-menta: #BFE8DA;
  --fuaspi-gold: #D9A441;
  --fuaspi-tinta: #22332B;
  --fuaspi-slate: #343A46;
  --fuaspi-gris: #5A6B63;
  --fuaspi-white: #FFFFFF;

  /* Tipografías */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-brand: 'Luckiest Guy', cursive, sans-serif;
  --font-heading: 'Inter', sans-serif;
}

/* Base and Reset Customizations */
body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
  color: var(--fuaspi-tinta);
}

.font-brand {
  font-family: var(--font-brand);
}

/* Gradients and Custom Backgrounds */
.gradient-hero {
  background: linear-gradient(135deg, #0A5A42 0%, #0E7C5B 60%, #22332B 100%);
}

.gradient-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #E9F4EF 100%);
}

.glass-header {
  background: rgba(34, 51, 43, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Interactive Card Effects */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(10, 90, 66, 0.1), 0 10px 10px -5px rgba(10, 90, 66, 0.04);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #E9F4EF;
}
::-webkit-scrollbar-thumb {
  background: #0E7C5B;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0A5A42;
}

/* Custom Utilities */
.badge-fuaspi {
  background-color: var(--fuaspi-bg-light);
  color: var(--fuaspi-emerald);
  border: 1px solid var(--fuaspi-menta);
}

.bg-fuaspi-emerald { background-color: var(--fuaspi-emerald); }
.bg-fuaspi-deep { background-color: var(--fuaspi-deep); }
.bg-fuaspi-bg { background-color: var(--fuaspi-bg-light); }
.bg-fuaspi-menta { background-color: var(--fuaspi-menta); }
.bg-fuaspi-gold { background-color: var(--fuaspi-gold); }
.bg-fuaspi-tinta { background-color: var(--fuaspi-tinta); }

.text-fuaspi-emerald { color: var(--fuaspi-emerald); }
.text-fuaspi-deep { color: var(--fuaspi-deep); }
.text-fuaspi-menta { color: var(--fuaspi-menta); }
.text-fuaspi-gold { color: var(--fuaspi-gold); }
.text-fuaspi-tinta { color: var(--fuaspi-tinta); }

.border-fuaspi-emerald { border-color: var(--fuaspi-emerald); }
.border-fuaspi-menta { border-color: var(--fuaspi-menta); }