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

/* Font imports - different variations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

/* Font variants for body text */
.font-variant-1 {
  font-family: 'Inter', sans-serif;
}

.font-variant-2 {
  font-family: 'IBM Plex Sans', sans-serif;
}

.font-variant-3 {
  font-family: 'Source Serif Pro', serif;
}

/* Font variants for headings */
.heading-variant-1 {
  font-family: 'Playfair Display', serif;
}

.heading-variant-2 {
  font-family: 'Crimson Text', serif;
}

.heading-variant-3 {
  font-family: 'Lora', serif;
}

.heading-variant-4 {
  font-family: 'Inter', sans-serif;
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

/* Custom utility classes */
.border-thick {
  border-width: 3px;
}

/* Justice icon styling */
.justice-icon {
  font-size: 3rem;
}

/* Navigation active state */
.nav-link.active {
  background-color: rgba(0, 0, 0, 0.1);
  color: white;
}

/* Photo placeholder styling */
.photo-placeholder {
  background: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), 
              linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, #f5f5f5 75%), 
              linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}