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

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Playfair+Display:wght@700;900&display=swap');

:root {
  --vmi-red: #AE122A;
  --vmi-gold: #FFD619;
  --vmi-dark-red: #8A0E22;
  --vmi-light-gold: #FFF3B8;
  --vmi-cream: #d7d4c9;
  --vmi-black: #1A1A1A;
  --vmi-gray: #4A4A4A;
  --vmi-light-gray: #F5F5F5;
}

body {
  font-family: 'Crimson Text', Georgia, serif;
  color: var(--vmi-black);
  background: var(--vmi-cream);
  font-size: 18px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--vmi-black);
}

/* Line clamp utilities (in case they're not in your Tailwind version) */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Custom utility classes for VMI theme */
@layer utilities {
  .vmi-red {
    color: var(--vmi-red);
  }
  
  .vmi-gold {
    color: var(--vmi-gold);
  }
  
  .bg-vmi-red {
    background-color: var(--vmi-red);
  }
  
  .bg-vmi-gold {
    background-color: var(--vmi-gold);
  }
  
  .bg-vmi-dark-red {
    background-color: var(--vmi-dark-red);
  }
  
  .border-vmi-red {
    border-color: var(--vmi-red);
  }
  
  .border-vmi-gold {
    border-color: var(--vmi-gold);
  }
  
  .hover\:bg-vmi-light-gold:hover {
    background-color: var(--vmi-light-gold);
  }
  
  .bg-vmi-cream {
    background-color: var(--vmi-cream);
  }
}

/* Override default link colors */
a {
  color: var(--vmi-red);
  text-decoration: none;
}

a:hover {
  color: var(--vmi-dark-red);
  text-decoration: underline;
}