/* MedSpaCopy theme tokens.
   Light defaults on :root, dark overrides on [data-theme="dark"]. */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg-app:        #f3efe8;
  --surface:       #ffffff;
  --surface-tint:  #f6f3ee;
  --surface-cool:  #eef1f3;

  /* Text */
  --ink:        #0f1a1f;
  --ink-mid:    #3a4a55;
  --ink-soft:   #5c6772;

  /* Borders */
  --border:      #e1e6eb;
  --border-warm: #e6dccb;
  --border-ink:  rgba(255,255,255,0.12);

  /* Accent (teal) */
  --accent:      #1f5161;
  --accent-600:  #173d4a;
  --accent-50:   #f0f5f6;
  --accent-100:  #dfe9ec;

  /* Warm (gold) */
  --warm:       #c79a5a;
  --warm-soft:  #e6cfa6;
  --warm-ink:   #5a4220;
  --warm-tint:  #f6efe1;

  /* Semantic */
  --warn: #b8762b;
  --good: #1f8a5b;
  --bad:  #a8553f;

  /* Landing-specific (LV) variants where they differ from P4 */
  --lv-warm:    #b8895c;
  --lv-good:    #3d8b6e;
  --lv-bad:     #a8553f;
  --lv-ink:     #1a2226;
  --lv-ink-mid: #39434a;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-app:       #0a1418;
  --surface:      #131e23;
  --surface-tint: #182429;
  --surface-cool: #16242a;

  --ink:        #ecf2f5;
  --ink-mid:    #b6c2cb;
  --ink-soft:   #95a3ad;

  --border:      #243440;
  --border-warm: #38322a;
  --border-ink:  rgba(255,255,255,0.08);

  --accent:      #6ba8bb;
  --accent-600:  #4d8597;
  --accent-50:   #1f2e36;
  --accent-100:  #233440;

  --warm:       #d6b07c;
  --warm-soft:  #6b5230;
  --warm-ink:   #f1dcb3;
  --warm-tint:  #2a2218;

  --warn: #d49241;
  --good: #4dab7e;
  --bad:  #cc785f;

  --lv-warm:    #d4a47a;
  --lv-good:    #5fa88a;
  --lv-bad:     #cc785f;
  --lv-ink:     #ecf2f5;
  --lv-ink-mid: #b6c2cb;
}

html, body {
  background: var(--bg-app);
  color: var(--ink);
}

html {
  scroll-behavior: smooth;
}

#root .page-wrap,
#root .landing-wrap {
  background: var(--surface);
}

/* Force dark scrollbar inside the doctor-review rewrite modal in dark theme.
   The modal panel paints over the page in a fixed layer; some browsers keep
   a light-themed scrollbar despite root color-scheme. */
[data-theme="dark"] .dr-modal-scroll {
  scrollbar-color: #3a4a55 #182429;
}
[data-theme="dark"] .dr-modal-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
[data-theme="dark"] .dr-modal-scroll::-webkit-scrollbar-track {
  background: #182429;
}
[data-theme="dark"] .dr-modal-scroll::-webkit-scrollbar-thumb {
  background: #3a4a55;
  border-radius: 6px;
  border: 2px solid #182429;
}
[data-theme="dark"] .dr-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: #4d6573;
}