/* Brand Colors */
:root {
  --color-primary: #0A1F73; /* Deep Royal Blue */
  --color-accent: #FFEB3B; /* Bright Sunny Yellow */
}
:root {
  --color-base: #ffffff; /* Pure White */
  --color-primary: #0A1F73; /* Deep Royal Blue */
  --color-accent: #FFEB3B; /* Bright Sunny Yellow */
}

/* Global Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-base);
  color: #1f2937; /* gray-800 for readability */
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Merriweather', serif;
}

/* Primary Buttons */
.btn-primary {
  @apply bg-primary text-white font-semibold py-2 px-4 rounded transition-colors duration-200;
  background-color: var(--color-primary);
}
.btn-primary:hover {
  background-color: #0d2c7d; /* slightly lighter */
}

/* Accent Elements */
.bg-accent {
  background-color: var(--color-accent);
}
.text-accent {
  color: var(--color-accent);
}

/* Header */
header .bg-primary {
  background-color: var(--color-primary);
}

/* Footer */
footer {
  background-color: #1e293b; /* slate-800 */
  color: #cbd5e1; /* slate-300 */
}
footer a {
  color: #cbd5e1;
}
footer a:hover {
  color: #ffffff;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Active language button */
.active-lang { background-color: #2563eb !important; color: white !important; }

/* Override Tailwind colors to brand palette */
.bg-blue-900, .bg-primary { background-color: var(--color-primary) !important; }
.bg-blue-800 { background-color: var(--color-primary) !important; }
.text-blue-900, .text-primary { color: var(--color-primary) !important; }
.bg-yellow-500, .bg-accent { background-color: var(--color-accent) !important; }
.text-yellow-500, .text-accent { color: var(--color-accent) !important; }

/* Ensure images and videos are responsive */
img, video { max-width: 100%; height: auto; }