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

/* Custom styles beyond Tailwind */
html {
  font-size: 14px;
  overflow-y: auto;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  @apply bg-white text-gray-900;
  min-height: auto;
  overflow-y: auto;
}

/* Hide vertical scrollbar but allow scrolling */
html {
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* ============================================
   REUSABLE COMPONENT SYSTEM
   ============================================ */

/* Design Tokens */
@layer base {
  :root {
    /* Primary Colors */
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-primary-light: #3B82F6;
    
    /* Neutral Colors */
    --color-bg: #F8FAFC;
    --color-bg-card: #FFFFFF;
    --color-text: #1E293B;
    --color-text-muted: #64748B;
    --color-text-light: #94A3B8;
    
    /* Border Colors */
    --color-border: #E2E8F0;
    --color-border-hover: #CBD5E1;
    --color-border-focus: #2563EB;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
  }
}

/* Card Component */
@layer components {
  .card {
    @apply bg-white rounded-2xl;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  }
  
  .card-body {
    @apply px-6 py-8;
  }
  
  /* Form Input */
  .form-input {
    @apply w-full px-4 py-3 rounded-xl text-sm transition-all outline-none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
  }
  
  .form-input::placeholder {
    color: var(--color-text-light);
  }
  
  .form-input:hover {
    border-color: var(--color-border-hover);
  }
  
  .form-input:focus {
    border-color: var(--color-border-focus);
  }
  
  /* Form Label */
  .form-label {
    @apply block text-sm font-medium mb-1.5;
    color: var(--color-text);
  }
  
  /* Form Group */
  .form-group {
    @apply mb-4;
  }
  
  /* Primary Button */
  .btn-primary {
    @apply w-full py-3 rounded-xl font-semibold text-white transition-all cursor-pointer;
    background-color: var(--color-primary);
  }
  
  .btn-primary:hover {
    background-color: var(--color-primary-hover);
  }
  
  .btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-light);
  }
  
  /* Secondary Button */
  .btn-secondary {
    @apply flex-1 py-3 px-4 rounded-xl border text-sm font-medium transition-all cursor-pointer;
    border-color: var(--color-border);
    background-color: white;
    color: var(--color-text-muted);
  }
  
  .btn-secondary:hover {
    background-color: var(--color-bg);
    border-color: var(--color-border-hover);
  }

  .btn-google {
    @apply w-full py-3 px-4 rounded-xl border text-sm font-medium transition-all cursor-pointer flex items-center justify-center gap-2;
    border-color: #D1D5DB;
    background-color: white;
    color: #1F2937;
  }

  .btn-google:hover {
    background-color: #F9FAFB;
    border-color: #9CA3AF;
  }

  .btn-google:focus {
    outline: none;
    box-shadow: 0 0 0 2px #93C5FD;
  }
  
  /* Form Error */
  .form-error {
    @apply mt-1 block text-xs;
    color: #DC2626;
  }
  
  /* Page Layout */
  .page-container {
    @apply flex-1 flex items-center justify-center px-4 py-12;
    background-color: var(--color-bg);
  }
  
  .page-content {
    @apply w-full max-w-sm;
  }
  
  /* Logo Icon */
  .logo-icon {
    @apply inline-flex items-center justify-center rounded-2xl mb-4;
    background-color: var(--color-primary);
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.4);
  }
  
  /* Divider */
  .divider {
    @apply relative my-6;
  }
  
  .divider-line {
    @apply w-full absolute top-1/2 left-0;
    border-top: 1px solid var(--color-border);
  }
  
  .divider-text {
    @apply relative flex justify-center text-xs px-3 bg-white;
    color: var(--color-text-light);
  }
}