@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

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

:root {
  --primary: #284B63;
  --primary-dark: #1d3647;
  --accent: #ffb703;
  --accent-hover: #e0a100;
  --stone-light: #e7e5e4;
  --stone-medium: #d6d3d1;
  --background-light: #f6f6f8;
  --background-dark: #101622;
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(16, 22, 34, 0.7);
}

@layer base {
  body {
    @apply bg-[var(--background-light)] dark:bg-[var(--background-dark)] font-display text-gray-800 dark:text-gray-100 antialiased min-h-screen flex flex-col;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight;
  }
}

@layer components {
  .btn-primary {
    @apply bg-[var(--primary)] hover:bg-[var(--primary-dark)] text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg active:scale-95;
  }
  
  .btn-accent {
    @apply bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-[var(--primary)] font-bold py-3 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg active:scale-95 flex items-center justify-center gap-2;
  }

  .nav-link {
    @apply text-gray-600 dark:text-gray-300 hover:text-[var(--primary)] dark:hover:text-white transition-colors duration-200 font-medium;
  }
  
  .glass-panel {
    @apply backdrop-blur-md bg-white/70 dark:bg-gray-900/80 border border-white/20 dark:border-gray-700/30 shadow-xl;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-[var(--primary)] to-blue-600 dark:from-blue-400 dark:to-white;
  }
  
  .animation-delay-200 {
    animation-delay: 200ms;
  }
  
  .animation-delay-400 {
    animation-delay: 400ms;
  }
}

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Mobile Navigation */
#mobile-menu {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}