/* ==========================================================================
   HeartandHome Design Tokens
   Source of truth for all brand values. Edit here, changes propagate everywhere.
   Values extracted from Home.pen V3 services section.
   ========================================================================== */

/* --- Webfonts: DM Serif Display + DM Sans enqueued in functions.php (hh-google-fonts) --- */

/* --- Design Tokens --- */

:root {
  /* Colors */
  --hh-accent-sage:      #5B6F60;
  --hh-bg-cream:         #FAF8F5;
  --hh-text-primary:     #2D2D2D;
  --hh-text-white:       #FFFFFF;
  --hh-text-muted:       #CCCCCC;
  --hh-overlay-gradient: linear-gradient(transparent, #000000CC);
  --hh-footer-bg:        #2c2a27;
  --hh-footer-text:      #ede6da;
  --hh-accent-rose:      #D4878F;

  /* Typography */
  --hh-font-heading:         'Libre Caslon Display', Georgia, serif;
  --hh-font-subheading:      'Libre Caslon Display', Georgia, serif;
  --hh-font-body:            'Nunito Sans', system-ui, sans-serif;
  --hh-font-heading-section: 40px;
  --hh-font-heading-card:    28px;
  --hh-font-label:           12px;
  --hh-font-body-small:      13px;
  --hh-lh-heading-card:      1.1;
  --hh-lh-body:              1.4;
  --hh-ls-heading:           -0.5px;
  --hh-ls-label:             2px;

  /* Spacing */
  --hh-gap-grid:          20px;
  --hh-gap-section:       40px;
  --hh-gap-content:       6px;
  --hh-gap-label:         8px;
  --hh-padding-section-y: 60px;
  --hh-padding-section-x: 80px;
  --hh-padding-card-top:  28px;
  --hh-padding-card-x:    24px;

  /* Layout */
  --hh-radius-card:      20px;
  --hh-radius-card-sm:   16px;

  /* Bento Grid */
  --hh-card-dark:        #2D2D2D;
  --hh-text-secondary:   #5A5A5A;
  --hh-border-light:     #E8E4DF;
  --hh-bento-row:        180px;
  --hh-bento-image-sm:   140px;
  --hh-bento-image-wide: 280px;

  /* Buttons — medium tier (style-guide.html: Primary / Sage; between Nav and Large) */
  --hh-btn-radius:           24px;
  --hh-btn-font-size:        15px;
  --hh-btn-font-weight:      500;
  --hh-btn-padding-y:        14px;
  --hh-btn-padding-x:        28px;
  --hh-btn-gap:              8px;
  --hh-btn-primary-bg:       #1A2A1D;
  --hh-btn-primary-border:   #1A2A1D;
  --hh-btn-primary-hover-bg: #0F1C12;
  --hh-btn-primary-hover-border: #0F1C12;
  --hh-btn-sage-hover-bg:    #4D6355;
  --hh-btn-sage-hover-border: #4D6355;
}

/* --------------------------------------------------------------------------
   Global page background — cream to eliminate white gaps between sections
   -------------------------------------------------------------------------- */

body,
#page-container {
  background-color: var(--hh-bg-cream) !important;
}

/* --------------------------------------------------------------------------
   Global font override — kill Divi font leaks (Open Sans, Hedvig, Lato, etc.)
   -------------------------------------------------------------------------- */

body #page-container,
body #page-container * {
  font-family: var(--hh-font-body) !important;
}

body #page-container h1,
body #page-container h2,
body #page-container .et_pb_module_header,
body #page-container h1 *,
body #page-container h2 *,
body #page-container .et_pb_module_header * {
  font-family: var(--hh-font-heading) !important;
}

body #page-container h3,
body #page-container h4,
body #page-container h5,
body #page-container h6,
body #page-container h3 *,
body #page-container h4 *,
body #page-container h5 *,
body #page-container h6 * {
  font-family: var(--hh-font-subheading) !important;
}