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

/* Brand Colors for Landing Page */
@layer base {
  :root {
    --color-brand-cream: #FFFBF5;
    --color-brand-green: #1A4D2E;
    --color-brand-lightGreen: #E8F5E9;
    --color-brand-accent: #4ADE80;
    --color-brand-orange: #FF7D45;
  }
}

/* Viewport meta tag should be set in index.html for proper mobile scaling */
@layer base {
  html {
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
    /* Ensure full height on mobile devices */
    height: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
    /* iOS Safari bounce effect fix */
    overscroll-behavior: none;
    /* Prevent text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Ensure full height on mobile devices */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
  
  #root {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
}

/* Mobile-first responsive utilities */
@layer utilities {
  .mobile-container {
    width: 100%;
    max-width: 28rem; /* 448px - suitable for most mobile devices */
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Safe area for devices with notches */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
  
  /* Touch-friendly tap targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Device-specific adjustments */
@media screen and (max-width: 320px) {
  /* iPhone SE and similar small devices */
  .mobile-container {
    max-width: 100%;
    padding: 0 0.5rem;
  }
}

@media screen and (min-width: 321px) and (max-width: 375px) {
  /* iPhone 12 mini, iPhone 13 mini */
  .mobile-container {
    max-width: 100%;
    padding: 0 0.75rem;
  }
}

@media screen and (min-width: 376px) and (max-width: 414px) {
  /* iPhone 12, iPhone 13, iPhone 14 */
  .mobile-container {
    max-width: 100%;
    padding: 0 1rem;
  }
}

@media screen and (min-width: 415px) and (max-width: 768px) {
  /* Large phones, foldables when folded */
  .mobile-container {
    max-width: 28rem;
    padding: 0 1rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Tablets, foldables when unfolded - keep mobile-like experience */
  .mobile-container {
    max-width: 28rem;
    padding: 0 1rem;
  }
}

@media screen and (min-width: 1025px) {
  /* Desktop and large tablets - keep mobile-like experience */
  .mobile-container {
    max-width: 28rem;
    padding: 0 1rem;
  }
}

/* Prevent zoom on input focus for iOS */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* Slide up animation for modals */
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* Marquee animation for landing page */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

/* Custom scrollbar styles for app screens preview */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}