/* 1. Font imports */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* 2. CSS Variables */
:root {
  /* Primary Colors */
  --primary-green: #4A6741;
  --primary-green-dark: #3A5233;
  --primary-green-light: #5A7751;
  
  /* Secondary Colors */
  --secondary-sage: #B8D4B8;
  --secondary-sage-light: #D4E6D4;
  --secondary-sage-dark: #9BC49B;
  
  /* Neutral Colors */
  --white: #FFFFFF;
  --cream: #FAF9F7;
  --light-gray: #F5F5F5;
  --medium-gray: #666666;
  --dark-gray: #333333;
  --text-primary: #2C2C2C;
  --text-secondary: #6B7280;
  
  /* Font Families */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 3. Custom utility classes using variables */
.bg-primary { background-color: var(--primary-green); }
.bg-primary-dark { background-color: var(--primary-green-dark); }
.bg-primary-light { background-color: var(--primary-green-light); }
.bg-secondary { background-color: var(--secondary-sage); }
.bg-secondary-light { background-color: var(--secondary-sage-light); }
.bg-secondary-dark { background-color: var(--secondary-sage-dark); }
.bg-cream { background-color: var(--cream); }
.bg-light-gray { background-color: var(--light-gray); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-sage { color: var(--primary-green); }
.text-white { color: var(--white); }

.border-primary { border-color: var(--primary-green); }
.border-secondary { border-color: var(--secondary-sage); }
.border-light { border-color: var(--light-gray); }

.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }

/* 4. Legacy accent class updated */
.bg-accent {
    background-color: var(--primary-green);
}

/* 5. Choices.js Custom Styling with new variables */
.choices__inner {
    border: 2px solid var(--light-gray) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    min-height: auto !important;
    background-color: var(--white) !important;
}

.choices__inner:focus {
    border-color: var(--primary-green) !important;
}

.choices__list--multiple .choices__item {
    background-color: var(--primary-green) !important;
    border: 1px solid var(--primary-green) !important;
    border-radius: 0.5rem !important;
}

.choices__list--dropdown {
    border: 2px solid var(--light-gray) !important;
    border-radius: 0.75rem !important;
    margin-top: 0.25rem !important;
}

.choices__item--choice {
    padding: 0.75rem !important;
}

.choices__item--choice.is-highlighted {
    background-color: var(--light-gray) !important;
}

.choices[data-type*=select-multiple] .choices__button {
    border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 6. Custom component styles */
.booking-form {
  background-color: var(--white);
  border: 1px solid var(--light-gray);
  font-family: var(--font-sans);
}

/* Button styles */
.btn-primary {
  background-color: var(--primary-green);
  color: var(--white);
  font-family: var(--font-sans);
}

.btn-primary:hover {
  background-color: var(--primary-green-dark);
}

.btn-secondary {
  background-color: var(--secondary-sage);
  color: var(--primary-green);
  font-family: var(--font-sans);
}

.btn-secondary:hover {
  background-color: var(--secondary-sage-dark);
}