Spanglish/frontend/src/app/globals.css

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-primary-dark antialiased;
    @apply font-normal; /* Regular (400) for body */
    @apply leading-relaxed; /* Good line spacing */
  }
  
  /* Titles: Medium (500) / SemiBold (600) with good spacing */
  h1 {
    @apply font-semibold tracking-tight leading-tight;
  }
  
  h2 {
    @apply font-semibold tracking-tight leading-tight;
  }
  
  h3 {
    @apply font-semibold leading-snug;
  }
  
  h4, h5, h6 {
    @apply font-medium leading-snug;
  }
  
  /* Paragraphs with good spacing */
  p {
    @apply leading-relaxed;
  }
  
  /* Buttons: Medium weight */
  button, .btn, [type="button"], [type="submit"], [type="reset"] {
    @apply font-medium;
  }
}

@layer components {
  .container-page {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .section-padding {
    @apply py-16 md:py-24;
  }
  
  .section-title {
    @apply text-3xl md:text-4xl font-semibold text-primary-dark tracking-tight;
  }
  
  .section-subtitle {
    @apply text-lg text-gray-600 mt-4 leading-relaxed;
  }
  
  /* Form styles */
  .form-group {
    @apply space-y-6;
  }
  
  /* Card hover effect */
  .card-hover {
    @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
  }
  
  /* Status badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-success {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .badge-danger {
    @apply bg-red-100 text-red-800;
  }
  
  .badge-info {
    @apply bg-blue-100 text-blue-800;
  }
  
  .badge-gray {
    @apply bg-gray-100 text-gray-800;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* TipTap Rich Text Editor Styles */
.ProseMirror {
  outline: none;
}

.ProseMirror p.is-editor-empty:first-child::before {
  @apply text-gray-400 pointer-events-none float-left h-0;
  content: attr(data-placeholder);
}

.ProseMirror > * + * {
  margin-top: 0.75em;
}

.ProseMirror h1 {
  @apply text-2xl font-bold mt-6 mb-3;
}

.ProseMirror h2 {
  @apply text-xl font-bold mt-5 mb-2;
}

.ProseMirror h3 {
  @apply text-lg font-semibold mt-4 mb-2;
}

.ProseMirror ul {
  @apply list-disc list-inside my-3;
}

.ProseMirror ol {
  @apply list-decimal list-inside my-3;
}

.ProseMirror li {
  @apply my-1;
}

.ProseMirror blockquote {
  @apply border-l-4 border-gray-300 pl-4 my-4 italic text-gray-600;
}

.ProseMirror hr {
  @apply border-t border-gray-300 my-6;
}

.ProseMirror strong {
  @apply font-bold;
}

.ProseMirror em {
  @apply italic;
}