/* 
 * Main Stylesheet for City Vision Eyewear
 */

@layer base {
  body {
    @apply bg-surface text-foreground font-body;
    font-size: 14px; /* Base font size for mobile */
  }
  
  /* Mobile-first responsive typography */
  h1 {
    font-size: 1.75rem; /* 28px on mobile */
  }
  
  h2 {
    font-size: 1.5rem; /* 24px on mobile */
  }
  
  h3 {
    font-size: 1.25rem; /* 20px on mobile */
  }
  
  h4 {
    font-size: 1.125rem; /* 18px on mobile */
  }
  
  h5, h6 {
    font-size: 1rem; /* 16px on mobile */
  }
  
  p, li, a, button, input, select, textarea {
    font-size: 0.875rem; /* 14px on mobile */
  }
  
  .text-xs {
    font-size: 0.75rem !important; /* 12px on mobile */
  }
  
  .text-sm {
    font-size: 0.813rem !important; /* 13px on mobile */
  }
  
  /* Tablet and desktop sizes */
  @media (min-width: 768px) {
    body {
      font-size: 16px; /* Base font size for tablet/desktop */
    }
    
    h1 {
      font-size: 2.25rem; /* 36px on tablet/desktop */
    }
    
    h2 {
      font-size: 1.875rem; /* 30px on tablet/desktop */
    }
    
    h3 {
      font-size: 1.5rem; /* 24px on tablet/desktop */
    }
    
    h4 {
      font-size: 1.25rem; /* 20px on tablet/desktop */
    }
    
    h5, h6 {
      font-size: 1.125rem; /* 18px on tablet/desktop */
    }
    
    p, li, a, button, input, select, textarea {
      font-size: 1rem; /* 16px on tablet/desktop */
    }
    
    .text-xs {
      font-size: 0.75rem !important; /* 12px on tablet/desktop */
    }
    
    .text-sm {
      font-size: 0.875rem !important; /* 14px on tablet/desktop */
    }
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight;
  }
  
  .glass {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background;
  }
}