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

:root {
  --color-primary: #003f87;
  --color-primary-container: #0056b3;
  --color-primary-on: #ffffff;
  
  --color-secondary: #006e25;
  --color-secondary-container: #80f98b;
  --color-secondary-on: #ffffff;
  
  --color-tertiary: #722b00;
  --color-tertiary-container: #983c00;
  --color-tertiary-on: #ffffff;
  
  --color-surface: #f7f9ff;
  --color-surface-dim: #d5dae2;
  --color-surface-bright: #f7f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4fc;
  --color-surface-container: #e9eef6;
  --color-surface-container-high: #e3e9f0;
  --color-surface-container-highest: #dde3eb;
  --color-surface-variant: #dde3eb;
  
  --color-on-surface: #161c22;
  --color-on-surface-variant: #424752;
  --color-on-background: #161c22;
  
  --color-outline: #727784;
  --color-outline-variant: #c2c6d4;
}

body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(247, 249, 255, 0.8);
}

.asymmetric-hero {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

@media (max-width: 768px) {
  .asymmetric-hero {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Tailwind utility mappings for the variables */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.text-primary-on { color: var(--color-primary-on); }

.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }
.bg-secondary-container { background-color: var(--color-secondary-container); }
.text-secondary-on { color: var(--color-secondary-on); }

.bg-surface { background-color: var(--color-surface); }
.bg-surface-dim { background-color: var(--color-surface-dim); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }

.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-on-background { color: var(--color-on-background); }

.border-outline-variant { border-color: var(--color-outline-variant); }