@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

body {
  font-family: "Inter", sans-serif;
  color: #1d2a3a;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom background grid pattern utilized in dark hero sections */
.bg-grid-pattern {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px
  );
  background-size: 32px 32px;
}

/* Active states for navigation links */
.nav-link-active {
  color: #22a39f !important; /* accent */
}

/* Smooth transitions */
.transition-all-300 {
  transition: all 0.3s ease-in-out;
}

/* Dynamic transparent header text visibility before scroll */
header:not(.bg-white) nav a.font-medium,
header:not(.bg-white) nav a.font-semibold,
header:not(.bg-white) nav button.font-medium,
header:not(.bg-white) nav button.font-semibold,
header:not(.bg-white) #mobile-burger-btn {
  color: #ffffff !important;
}

header:not(.bg-white) nav a.font-medium:hover,
header:not(.bg-white) nav a.font-semibold:hover,
header:not(.bg-white) nav button.font-medium:hover,
header:not(.bg-white) nav button.font-semibold:hover,
header:not(.bg-white) #mobile-burger-btn:hover {
  color: #22a39f !important; /* accent on hover */
}

:root {
  --primary: #011b33;
  --primary-dark: #01142b;
  --accent: #22a39f;
  --accent-dark: #1d8a87;
  --accent-rgb: 34, 163, 159;
}

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

.text-primary-dark {
  color: var(--primary-dark) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-primary-dark {
  background-color: var(--primary-dark) !important;
}

.bg-accent {
  background-color: var(--accent) !important;
}

.bg-accent-dark {
  background-color: var(--accent-dark) !important;
}

.bg-primary\/10 {
  background-color: rgba(1, 27, 51, 0.1) !important;
}

.bg-accent\/10 {
  background-color: rgba(34, 163, 159, 0.1) !important;
}

.bg-accent\/30 {
  background-color: rgba(34, 163, 159, 0.3) !important;
}

.border-accent {
  border-color: var(--accent) !important;
}

.border-accent\/30 {
  border-color: rgba(34, 163, 159, 0.3) !important;
}

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

.hover\:bg-primary-dark:hover {
  background-color: var(--primary-dark) !important;
}

.hover\:bg-accent-dark:hover {
  background-color: var(--accent-dark) !important;
}

.focus\:ring-accent:focus {
  box-shadow: 0 0 0 0.25rem rgba(34, 163, 159, 0.25) !important;
}

.focus\:border-accent:focus {
  border-color: var(--accent) !important;
}

.shadow-accent\/20 {
  box-shadow:
    0 10px 15px -3px rgba(34, 163, 159, 0.2),
    0 4px 6px -4px rgba(34, 163, 159, 0.2) !important;
}