@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  
  body {
    @apply bg-[#FAFAFA] dark:bg-[#02040A];
    min-height: 100vh;
    /* Extend the background color beyond the viewport */
    min-height: -webkit-fill-available;
  }
  
  /* Force font weights on iOS */
  strong, b, h1, h2, h3, h4, h5, h6, 
  .font-bold, .font-semibold, .font-medium {
    -webkit-font-smoothing: auto;
  }
}

.rdp {
  --rdp-cell-size: 40px;
  --rdp-accent-color: #3b82f6;
  --rdp-background-color: #e5e7eb;
  margin: 0;
}

.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
  background-color: #f3f4f6;
}

.animate-slide-in {
  animation: slideIn 0.5s forwards;
}

@keyframes slideIn {
  from {
      transform: translateY(-20px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}


.animate-fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}