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

:root {
  --foreground-rgb: 218, 218, 218;
  --background-rgb: 11, 11, 11;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Touch-friendly tap targets */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

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

  /* Mobile-friendly tap targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Hide scrollbar while maintaining functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Safe area padding for notched devices */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .safe-right {
    padding-right: env(safe-area-inset-right);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom scrollbar (desktop) */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0b0b0b;
  }

  ::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/* Mobile-specific styles */
@media (max-width: 640px) {
  /* Larger touch targets on mobile */
  button, 
  a, 
  input[type="button"], 
  input[type="submit"],
  [role="button"] {
    min-height: 44px;
  }

  /* Better input styling on mobile */
  input, textarea, select {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Smoother scrolling on mobile */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* Prevent iOS bounce/pull-to-refresh on certain elements */
.no-bounce {
  overscroll-behavior: none;
}

/* Focus visible only for keyboard navigation */
@media (hover: none) and (pointer: coarse) {
  *:focus {
    outline: none;
  }
}

/* Print styles */
@media print {
  nav, footer, button {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
}