/* app/theme.css */
html {
  background-color: hsl(var(--bg));
}

/* Offset anchor scroll targets to account for sticky nav */
a[id] {
  scroll-margin-top: 6rem;
}

:root {
  /* Base */
  --bg: 38 35% 96%; /* warm cream */
  --fg: 20 12% 20%; /* warm charcoal */

  /* Brand */
  --primary: 43 89% 45%; /* deep gold #dba20d */
  --primary-foreground: 20 12% 12%; /* dark text on gold */

  --accent: 340 30% 80%; /* dusty rose/blush */
  --accent-foreground: 20 12% 20%;

  /* Secondary */
  --secondary: 271 28% 72%; /* lavender (slightly warmer) */
  --secondary-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 72% 40%;
  --destructive-foreground: 0 0% 100%;

  /* Surfaces */
  --card: 0 0% 100%;
  --card-foreground: 20 12% 20%;
  --border: 30 20% 88%; /* warm lavender-beige */
  --muted: 20 8% 42%; /* warm grey */

  /* Extended surface tokens */
  --surface: 271 20% 95%; /* very light lavender */
  --surface-warm: 38 40% 93%; /* warm peach-cream */
  --nav-bg: 0 0% 100%;
  --nav-fg: 20 12% 25%;
  --hero-overlay: 260 40% 18%; /* deep purple-indigo, harmonizes with lavender blobs */
  --sage: 150 22% 62%; /* muted sage green */
}

[data-theme="dark"] {
  /* Base */
  --bg: 271 25% 10%; /* deep purple-dark */
  --fg: 38 15% 94%; /* warm light cream */

  /* Brand */
  --primary: 43 85% 52%; /* gold, lightened for dark bg */
  --primary-foreground: 20 12% 12%; /* dark text on gold */

  --accent: 340 25% 65%; /* dusty rose (darker mode) */
  --accent-foreground: 20 12% 20%;

  /* Secondary */
  --secondary: 271 24% 70%;
  --secondary-foreground: 0 0% 100%;

  /* Destructive */
  --destructive: 0 72% 40%;
  --destructive-foreground: 0 0% 100%;

  /* Surfaces */
  --card: 271 20% 14%;
  --card-foreground: 0 0% 95%;
  --border: 271 15% 22%;
  --muted: 271 15% 65%;

  /* Extended surface tokens */
  --surface: 271 20% 14%;
  --surface-warm: 20 15% 14%;
  --nav-bg: 271 25% 12%;
  --nav-fg: 38 15% 90%;
  --hero-overlay: 260 40% 8%; /* deep purple-indigo — harmonizes with lavender blobs */
  --sage: 150 15% 48%;
}

/* Theme-aware visibility helpers (keyed to [data-theme="dark"] attribute) */
.dark-hidden { display: block; }
.dark-block  { display: none; }
[data-theme="dark"] .dark-hidden { display: none; }
[data-theme="dark"] .dark-block  { display: block; }

/* Safari fallback: hide waves, use straight section breaks */
.is-safari .wave-divider        { display: none; }
.is-safari .cta-banner          { padding-top: 4rem; }

/* Wave fills — explicit CSS fill property for Safari compatibility */
.wave-bg           { fill: hsl(var(--bg)); }
.wave-surface-warm { fill: hsl(var(--surface-warm)); }
.wave-surface      { fill: hsl(var(--surface)); }

pre {
  background-color: hsl(var(--card));
}

code {
  background-color: hsl(var(--card));
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  border-radius: 0.4em;
}

[data-theme="dark"] pre {
  background-color: black;
}

[data-theme="dark"] code {
  background-color: black;
}

/* Override SimplePractice widget display so flex centering works */
.sp-schedule-btn,
.sp-contact-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}