@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

html, body {
  scroll-behavior: smooth;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
}

/* BRAND COLOR DEFINITIONS */
:root {
  --color-brand-navy: #0c3c5e;
  --color-brand-river: #238cb8;
  --color-brand-cyan: #68b2d8;
  --color-brand-leaf: #81c142;
  --color-brand-teal: #1d7a78;
  --color-brand-dark: #08283f;
}

/* Background Utility Classes */
.bg-brand-navy { background-color: var(--color-brand-navy); }
.bg-brand-river { background-color: var(--color-brand-river); }
.bg-brand-cyan { background-color: var(--color-brand-cyan); }
.bg-brand-leaf { background-color: var(--color-brand-leaf); }
.bg-brand-teal { background-color: var(--color-brand-teal); }
.bg-brand-dark { background-color: var(--color-brand-dark); }

/* Text Utility Classes */
.text-brand-navy { color: var(--color-brand-navy); }
.text-brand-river { color: var(--color-brand-river); }
.text-brand-cyan { color: var(--color-brand-cyan); }
.text-brand-leaf { color: var(--color-brand-leaf); }
.text-brand-teal { color: var(--color-brand-teal); }

/* Border Utility Classes */
.border-brand-river { border-color: var(--color-brand-river); }
.border-brand-leaf { border-color: var(--color-brand-leaf); }

/* Interactive Hover Animations */
.interactive-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interactive-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px -5px rgba(12, 60, 94, 0.15);
}