/* Good Karma Villa - Custom Color Palette */

/* TEST: This should make body background slightly different to test if custom CSS is loading */
body {
  background: #fefefe !important;
}

:root {
  /* Brand Colors */
  --black: #000000;
  --charcoal: #1C1C1C;
  --white: #FFFFFF;
  
  /* Primary Accent Colors */
  --peach: #FAD6C4;
  --coral: #F7A78C;
  --soft-peach: #F9C6AA;
  
  /* Background Colors */
  --light-gray: #F5F5F5;
  --beige: #EDE3DA;
  
  /* Text Colors */
  --text-primary: var(--charcoal);
  --text-heading: var(--black);
  --text-light: var(--white);
  
  /* Button Colors */
  --btn-primary-bg: var(--peach);
  --btn-primary-text: var(--black);
  --btn-primary-hover: var(--coral);
  
  --btn-secondary-bg: var(--coral);
  --btn-secondary-text: var(--white);
  --btn-secondary-hover: var(--soft-peach);
  
  /* Border Colors */
  --border-dark: var(--black);
  --border-light: var(--beige);
}

/* Primary Buttons - Peach background with black text */
.btn-primary-peach {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 2px solid var(--btn-primary-bg);
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.btn-primary-peach:hover,
.btn-primary-peach:focus {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Secondary Buttons - Coral background for special promotions */
.btn-secondary-coral {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-bg);
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.btn-secondary-coral:hover,
.btn-secondary-coral:focus {
  background-color: var(--btn-secondary-hover);
  border-color: var(--btn-secondary-hover);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Override existing button styles to use new colors */
.btn.btn-outline-white-primary:hover {
  border: 2px solid transparent;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

/* Dividers & Lines */
.divider-dark {
  border-color: var(--border-dark);
  border-width: 1px;
}

.divider-light {
  border-color: var(--border-light);
  border-width: 1px;
}

.section-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-light);
  margin: 2rem 0;
}

.section-divider.dark {
  background-color: var(--border-dark);
}

/* Horizontal Rules */
hr.elegant {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-light), transparent);
  margin: 3rem 0;
}

hr.elegant.dark {
  background: linear-gradient(to right, transparent, var(--border-dark), transparent);
}

/* Background Colors */
.bg-white-clean {
  background-color: var(--white);
  color: var(--text-primary);
}

.bg-light-gray {
  background-color: var(--light-gray);
  color: var(--text-primary);
}

.bg-beige-warm {
  background-color: var(--beige);
  color: var(--text-primary);
}

.bg-charcoal {
  background-color: var(--charcoal);
  color: var(--white);
}

.bg-black {
  background-color: var(--black);
  color: var(--white);
}

/* Section Background Variations */
.section-white {
  background-color: var(--white);
  padding: 5rem 0;
}

.section-light {
  background-color: var(--light-gray);
  padding: 5rem 0;
}

.section-beige {
  background-color: var(--beige);
  padding: 5rem 0;
}

/* Accents & Highlights */
.accent-peach {
  color: var(--peach);
}

.accent-coral {
  color: var(--coral);
}

.highlight-peach {
  background-color: var(--peach);
  color: var(--black);
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

.highlight-coral {
  background-color: var(--coral);
  color: var(--white);
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Special Banners */
.banner-coral {
  background-color: var(--coral);
  color: var(--white);
  padding: 1rem 2rem;
  text-align: center;
  font-weight: 600;
  border-radius: 8px;
  margin: 2rem 0;
}

.banner-peach {
  background-color: var(--peach);
  color: var(--black);
  padding: 1rem 2rem;
  text-align: center;
  font-weight: 600;
  border-radius: 8px;
  margin: 2rem 0;
}

/* Quote Highlights */
.quote-highlight {
  border-left: 4px solid var(--peach);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-primary);
}

.quote-highlight.coral {
  border-left-color: var(--coral);
}

/* Pricing or Special Offer Highlights */
.price-highlight {
  background: linear-gradient(135deg, var(--peach), var(--coral));
  color: var(--white);
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  font-weight: bold;
}

/* Text Accents */
.text-peach {
  color: var(--peach);
}

.text-coral {
  color: var(--coral);
}

.text-charcoal {
  color: var(--charcoal);
}

/* Border Accents */
.border-peach {
  border: 2px solid var(--peach);
}

.border-coral {
  border: 2px solid var(--coral);
}

.border-beige {
  border: 1px solid var(--beige);
}