@import "tailwindcss";

/* Custom theme */
@theme {
  --color-moss-950: #0a1a14;
  --color-moss-900: #122a21;
  --color-moss-800: #1a3d32;
  --color-moss-700: #245040;
  --color-moss-600: #2D4A3E;
  --color-moss-500: #3D5A4C;
  --color-moss-400: #6B8E7D;
  --color-moss-300: #8aab98;
  
  --color-sand: #F5F0E8;
  --color-cream: #FDFBF7;
  --color-beige: #E8E2D9;
  --color-gold: #C9A962;
  --color-honey: #D4B96A;
  --color-terracotta: #C67D5E;
}

/* Base */
body {
  background-color: #F5F0E8;
  color: #1a1a1a;
}

/* Header */
.header {
  background-color: rgba(245, 240, 232, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #E8E2D9;
}

/* Cards */
.card {
  background-color: white;
  border: 1px solid #E8E2D9;
  border-radius: 1rem;
  transition: all 0.3s;
}

.card:hover {
  border-color: #C9A962;
  box-shadow: 0 10px 40px rgba(201, 169, 98, 0.1);
}

/* Buttons */
.btn-primary {
  background-color: #C9A962;
  color: #122a21;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #D4B96A;
}

/* Tags */
.tag {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Section spacing */
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }