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

/* Custom styles and CSS variables with improved contrast ratios */
:root {
  --color-primary: #E53E3E; /* Darker red for better contrast */
  --color-secondary: #2D7D7A; /* Darker teal for better contrast */
  --color-accent: #D69E2E; /* Darker yellow for better contrast */
  --color-light: #F7F7F7;
  --color-dark: #1A202C; /* Dark color for better text contrast */
  --color-text-primary: #2D3748; /* Darker gray for better readability */
  --color-text-secondary: #4A5568; /* Medium gray with better contrast */
  --color-text-muted: #718096; /* Better contrast than light gray */
}

/* Custom component styles */
@layer components {
  .text-primary { color: var(--color-primary); }
  .bg-primary { background-color: var(--color-primary); }
  .hover\:bg-primary\/90:hover { background-color: color-mix(in srgb, var(--color-primary) 90%, transparent); }
  .hover\:text-primary:hover { color: var(--color-primary); }
  .bg-white\/80 { background-color: color-mix(in srgb, white 95%, transparent); } /* Increased opacity for better contrast */
  
  /* High-contrast text alternatives */
  .text-high-contrast { color: var(--color-text-primary); }
  .text-medium-contrast { color: var(--color-text-secondary); }
  .text-muted { color: var(--color-text-muted); }
  
  /* High-contrast background alternatives */
  .bg-high-contrast { background-color: var(--color-dark); }
  .bg-medium-contrast { background-color: #E2E8F0; }
  
  /* Blog grid styles */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Force grid layout for blog posts */
  .blog-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 2rem !important;
    width: 100% !important;
  }
  
  @media (min-width: 768px) {
    .blog-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  
  @media (min-width: 1024px) {
    .blog-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }
  
  /* Ensure grid items have equal height and proper spacing */
  .blog-grid > article {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 400px !important;
  }
}