@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 75, 85, 99;
  --background-rgb: 255, 255, 255;
  --primary: 58, 95%, 56%;
  --primary-light: 56, 85%, 85%;
  --primary-medium: 57, 100%, 74%;
  --secondary: 240, 100%, 25%;
  --secondary-light: 210, 100%, 96%;
  --secondary-dark: 240, 90%, 18%;
  --radius: 0.5rem;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  font-family: var(--font-geist);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-exo-2);
  color: #050556; /* Our darkest blue for headings */
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .btn {
    @apply inline-flex items-center justify-center rounded-full px-6 py-3 text-base font-medium transition-colors;
  }

  .btn-primary {
    @apply bg-primary text-secondary hover:bg-primary/90;
  }

  .btn-outline {
    @apply border border-primary text-secondary hover:bg-primary hover:text-secondary;
  }

  .card {
    @apply rounded-lg overflow-hidden bg-secondary-light p-6;
  }

  .section-title {
    @apply text-4xl md:text-5xl font-bold mb-4;
  }

  .section-subtitle {
    @apply text-lg text-gray-500 mb-8 max-w-3xl mx-auto;
  }

  .feature-item {
    @apply flex items-center gap-2 mb-4;
  }

  .feature-icon {
    @apply text-secondary;
  }

  /* Mobile menu styles */
  .mobile-menu-open {
    @apply overflow-hidden;
  }
}

/* Footer gradient and decorations */
.footer-gradient {
  background: radial-gradient(circle at center, var(--secondary) 0%, var(--secondary-dark) 50%, #000 100%);
}

.footer-title-decoration {
  position: relative;
}

.footer-title-decoration::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--primary);
}