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

/* Museo Sans Font Family */
@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSansW05-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSansW05-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSansW05-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('/fonts/MuseoSansW05-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
  }
  
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  /* Fix mobile code overflow */
  @media (max-width: 640px) {
    pre {
      font-size: 12px;
      line-height: 1.4;
    }
  }
}

@layer utilities {
  .animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}