/**
 * ============================================================================
 * GENTLE RIVER COUNSELING - THEME COLORS
 * ============================================================================
 *
 * HOW TO CHANGE COLORS:
 * 1. Find the color you want to change below
 * 2. Replace the hex code (e.g., #ff6a4c) with your new color
 * 3. Save the file
 * 4. Refresh your browser to see the changes
 *
 * NO REBUILDING REQUIRED - changes take effect immediately!
 *
 * COLOR FORMAT: Use hex codes like #ff6a4c or rgb values like rgb(255, 106, 76)
 * TIP: Search "hex color picker" in Google to find colors you like
 *
 * ============================================================================
 */

:root {

  /* ==========================================================================
     BUTTONS
     ========================================================================== */

  --button-color: #ff6a4c;              /* "Book Now", "Send Message", "Client Portal" buttons */
  --button-hover-color: #e1523f;        /* Button color when mouse hovers over it */


  /* ==========================================================================
     HEADER (top navigation bar)
     ========================================================================== */

  --header-background: #172028;         /* Dark background behind logo and menu */
  --header-accent: #ff8f6e;             /* "Counseling" text in logo */


  /* ==========================================================================
     FOOTER (bottom of page)
     ========================================================================== */

  --footer-background: #0f1418;         /* Dark background at very bottom */
  --footer-accent: #ff8f6e;             /* "Counseling" and accent text */


  /* ==========================================================================
     HERO SECTION (sunset image area at top)
     ========================================================================== */

  --hero-title-color: #fdfcf9;          /* "Gentle River" text */
  --hero-subtitle-color: #ffb59a;       /* "Counseling" text (coral/peach) */
  --hero-welcome-color: #f5f1e6;        /* "WELCOME TO" text */
  --hero-body-text: #fdfcf9;            /* Description paragraph */


  /* ==========================================================================
     PAGE BACKGROUNDS
     ========================================================================== */

  --page-background: #fdfcf9;           /* Main cream/off-white background */
  --section-background-alt: #faf8f2;    /* Slightly darker cream for alternating sections */
  --card-background: #ffffff;           /* White cards and form boxes */

  --dark-section-background: #172028;   /* "Sessions" section background */
  --contact-section-background: #24343f; /* Contact form section background */


  /* ==========================================================================
     TEXT COLORS
     ========================================================================== */

  /* On light/cream backgrounds */
  --heading-color: #172028;             /* Section titles like "Lisa A. Paquette" */
  --body-text-color: #383b39;           /* Main paragraph text */
  --subtle-text-color: #636966;         /* Less important text, captions */
  --label-color: #3c5b6a;               /* "MEET YOUR THERAPIST", "AREAS OF" labels */

  /* On dark backgrounds */
  --light-heading-color: #fdfcf9;       /* White/cream headings */
  --light-body-text: #f5f1e6;           /* Body text on dark sections */
  --light-subtle-text: #99b1c8;         /* Muted text on dark sections */


  /* ==========================================================================
     ACCENTS & HIGHLIGHTS
     ========================================================================== */

  --accent-color: #ff6a4c;              /* Coral accent for links and highlights */
  --accent-light: #ffb59a;              /* Lighter coral for softer accents */
  --peach-highlight: #ffd8c9;           /* Soft peach for borders and subtle highlights */


  /* ==========================================================================
     FORM INPUTS
     ========================================================================== */

  --input-border-color: #cbdce8;        /* Border around text fields */
  --input-focus-color: #ff6a4c;         /* Border color when field is selected */

}


/* ============================================================================
   DO NOT EDIT BELOW THIS LINE
   These rules apply the colors defined above to the website
   ============================================================================ */

/* Buttons */
.btn-primary,
a[href="#contact"].bg-coral-500,
button.bg-coral-500 {
  background-color: var(--button-color) !important;
}
.btn-primary:hover,
a[href="#contact"].bg-coral-500:hover,
button.bg-coral-500:hover {
  background-color: var(--button-hover-color) !important;
}

/* Header */
header.bg-dusk-800 {
  background-color: var(--header-background) !important;
}
header .text-coral-400 {
  color: var(--header-accent) !important;
}

/* Footer */
footer.bg-dusk-900 {
  background-color: var(--footer-background) !important;
}
footer .text-coral-400 {
  color: var(--footer-accent) !important;
}

/* Hero section text */
.site-hero h1 {
  color: var(--hero-title-color) !important;
}
.site-hero .text-coral-300 {
  color: var(--hero-subtitle-color) !important;
}

/* Dark sections */
section.bg-dusk-800 {
  background-color: var(--dark-section-background) !important;
}
section.bg-dusk-700 {
  background-color: var(--contact-section-background) !important;
}

/* Light sections */
section.bg-cream-50 {
  background-color: var(--page-background) !important;
}
section.bg-cream-100 {
  background-color: var(--section-background-alt) !important;
}

/* Page background */
body.bg-cream-50 {
  background-color: var(--page-background) !important;
}

/* Coral accent text */
.text-coral-300 {
  color: var(--accent-light) !important;
}
.text-coral-400,
.text-coral-500 {
  color: var(--accent-color) !important;
}
.text-coral-600 {
  color: var(--button-hover-color) !important;
}

/* Number badges on service cards */
.bg-coral-500 {
  background-color: var(--button-color) !important;
}

/* Cards */
.bg-white,
.bg-cream-50 > .bg-white {
  background-color: var(--card-background) !important;
}