/* Balance Aesthetics Theme Overrides */

[data-theme="balance"] {
  /* Typography - Cormorant Garamond for headings, Montserrat for body */
  --font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Georgia", serif;
  
  /* Balance color palette - warm, earthy, organic tones */
  --color-bg-primary: rgb(245, 239, 230) !important;
  --color-bg-secondary: rgb(246, 242, 239) !important;
  --color-bg-primary_hover: rgb(238, 230, 218) !important;
  --background-color-primary: rgb(245, 239, 230) !important;
  --background-color-secondary: rgb(246, 242, 239) !important;
  
  /* Text colors - warm peachy/terracotta tones */
  --color-text-primary: rgb(180, 130, 100) !important;
  --color-text-secondary: rgb(170, 120, 90) !important;
  --color-text-tertiary: rgb(160, 110, 80) !important;
  
  /* Foreground colors for text classes */
  --color-fg-primary: rgb(180, 130, 100) !important;
  --color-fg-secondary: rgb(170, 120, 90) !important;
  --color-fg-tertiary: rgb(160, 110, 80) !important;
  
  /* Brand colors - muted olive gold */
  --color-brand-500: rgb(168, 153, 104) !important;
  --color-brand-600: rgb(148, 133, 84) !important;
  --color-brand-700: rgb(128, 113, 64) !important;
  --color-fg-brand-primary: rgb(148, 133, 84) !important;
  --color-fg-brand-secondary: rgb(168, 153, 104) !important;
  --color-text-brand-secondary: rgb(148, 133, 84) !important;
  --color-text-brand-accent: rgb(168, 153, 104) !important;
  
  /* Button backgrounds */
  --color-bg-brand-solid: rgb(148, 133, 84) !important;
  --color-bg-brand-solid_hover: rgb(128, 113, 64) !important;
  --background-color-brand-solid: rgb(148, 133, 84) !important;
  --background-color-brand-solid_hover: rgb(128, 113, 64) !important;
  
  /* Border colors */
  --color-border-primary: rgb(229, 220, 206) !important;
  --color-border-secondary: rgb(217, 191, 168) !important;
}

/* Design gallery only: pattern on preview box (wallpaper/transparent hack lives in customer site custom-overrides) */
[data-theme="balance"] .gallery-preview-box {
  background-color: rgb(245, 239, 230) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='200' height='200' fill='%23f5efe6'/%3E%3Cg opacity='0.18'%3E%3Ccircle cx='50' cy='50' r='2' fill='%23c9a88a'/%3E%3Cellipse cx='50' cy='45' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='55' cy='50' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Cellipse cx='50' cy='55' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='45' cy='50' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Ccircle cx='150' cy='50' r='2' fill='%23c9a88a'/%3E%3Cellipse cx='150' cy='45' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='155' cy='50' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Cellipse cx='150' cy='55' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='145' cy='50' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Ccircle cx='50' cy='150' r='2' fill='%23c9a88a'/%3E%3Cellipse cx='50' cy='145' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='55' cy='150' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Cellipse cx='50' cy='155' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='45' cy='150' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Ccircle cx='150' cy='150' r='2' fill='%23c9a88a'/%3E%3Cellipse cx='150' cy='145' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='155' cy='150' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Cellipse cx='150' cy='155' rx='4' ry='6' fill='%23d9bfa8'/%3E%3Cellipse cx='145' cy='150' rx='6' ry='4' fill='%23d9bfa8'/%3E%3Cpath d='M100 95 L102 90 L104 95 Z' fill='%23e5d5c0'/%3E%3Cpath d='M100 105 L102 110 L104 105 Z' fill='%23e5d5c0'/%3E%3Cpath d='M95 100 L90 102 L95 104 Z' fill='%23e5d5c0'/%3E%3Cpath d='M105 100 L110 102 L105 104 Z' fill='%23e5d5c0'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 200px 200px !important;
}

/* Body font - only affects themed content */
[data-theme="balance"] {
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Headings use Cormorant Garamond with warm color */
[data-theme="balance"] h1,
[data-theme="balance"] h2,
[data-theme="balance"] h3,
[data-theme="balance"] h4,
[data-theme="balance"] h5,
[data-theme="balance"] h6 {
  font-family: "Cormorant Garamond", "Georgia", serif !important;
  font-weight: 400;
  color: rgb(180, 120, 90) !important;
}

/* .font-display class uses Cormorant Garamond */
[data-theme="balance"] .font-display {
  font-family: "Cormorant Garamond", "Georgia", serif !important;
  font-weight: 400;
}

/* .font-body class uses Montserrat */
[data-theme="balance"] .font-body {
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Secondary background sections get solid color overlay */
[data-theme="balance"] .bg-secondary {
  background-color: rgb(246, 242, 239) !important;
  background-image: none !important;
}

/* Header: always opaque (no transparent) */
[data-theme="balance"] header {
  background-color: rgb(245, 239, 230) !important;
  background-image: none !important;
  border-bottom: 3px solid rgb(217, 191, 168) !important;
}

/* Nav dropdown panel: opaque so content is readable */
[data-theme="balance"] header .balance-dropdown-panel {
  background-color: rgb(245, 239, 230) !important;
  background-image: none !important;
}

/* Mobile menu overlay: opaque */
[data-theme="balance"] .balance-mobile-menu {
  background-color: rgb(245, 239, 230) !important;
  background-image: none !important;
}

[data-theme="balance"] header nav a,
[data-theme="balance"] header nav span {
  color: rgb(170, 143, 123) !important;
  font-family: "Cormorant Garamond", "Georgia", serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

[data-theme="balance"] header nav a:hover {
  color: rgb(148, 133, 84) !important;
}

/* Paragraphs and general text inherit fonts and use warm color */
[data-theme="balance"] p,
[data-theme="balance"] span:not(button span):not(button *):not(a[role="button"] span):not(a[role="button"] *),
[data-theme="balance"] div,
[data-theme="balance"] li {
  font-family: inherit;
  color: rgb(180, 130, 100) !important;
}

/* FAQ questions and all text should use warm color */
[data-theme="balance"] summary,
[data-theme="balance"] details > summary {
  color: rgb(180, 130, 100) !important;
}

/* Ensure carousel control icons use theme colors */
[data-theme="balance"] [class*="Carousel"] svg,
[data-theme="balance"] [class*="carousel"] svg {
  color: rgb(148, 133, 84) !important;
}
