/* Dream Ladder — Brand Theme Tokens (dl1 scaffold, re-pointed in dl17)
 *
 * Loaded AFTER health-engine's app/static/css/design_tokens.css so every
 * variable declared here overrides the engine default. Because dl17
 * tokenised the engine CSS — ~200 hardcoded teal literals across
 * workspace/dashboard/calendar/notifications/profile/family_feed_v2.css are
 * now var(--color-teal-*) / rgba(var(--color-brand-rgb), a) references —
 * redefining the small primary scale below re-themes the ENTIRE
 * authenticated app to Dream Ladder's coral in one place.
 *
 * Arogya loads NONE of this file, so its teal values are untouched
 * (pixel-identical). Dream Ladder loads it right after design_tokens.css on
 * every authenticated template head.
 *
 * Palette: warm coral (#B85450), the identity already used on the marketing
 * landing + login page. Scale runs light (50) → dark/primary (900), matching
 * the teal scale's lightness ordering so every existing usage stays coherent
 * (dark shades carry white text, light shades carry dark text).
 *
 * NOTE (contrast): #B85450 is a mid-tone coral; white text on it clears AA
 * for large/bold UI text but is borderline for small body text. This matches
 * the established DL brand rather than silently deepening it — a future
 * identity pass can tune the exact hue.
 */

:root {
  /* Primary brand colour + its rgb triple (drives rgba(var(--color-brand-rgb), a)). */
  --color-brand:       #B85450;
  --color-brand-rgb:   184, 84, 80;
  --color-brand-60:    rgba(184, 84, 80, 0.60);

  /* Coral re-theme of the engine's teal scale (light → dark). */
  --color-teal-50:     #FBEEEB;  /* palest coral wash   (was #E1F5EE) */
  --color-teal-200:    #EFC4BE;  /* soft coral tint     (was #9FE1CB) */
  --color-teal-700:    #CB6B65;  /* mid coral           (was #0F6E56) */
  --color-teal-800:    #C15E59;  /* deep coral          (was #085041) */
  --color-teal-900:    #B85450;  /* primary coral       (was #083D36) */

  /* Semantic vars that referenced the teal literal directly. */
  --bottom-nav-active: var(--color-brand);
  --form-label-color:  var(--color-brand);

  /* "Mine" section tint — faint teal-green on Arogya; warm it for DL. */
  --color-tint-mine:   #FCEFEC;

  /* ── Legacy placeholder aliases (dl1). Kept so the brand-pack login/landing
   *    overrides that referenced them don't break. Not used by the engine. ── */
  --color-brand-primary:        #B85450;
  --color-brand-primary-strong: #8F3A38;
  --color-brand-primary-soft:   #EFC4BE;
  --color-brand-primary-wash:   #FBEEEB;
}

/* ── dl22 · Brand logo (DL-B-024 / DL-B-025) ─────────────────────────────────
 * The mark (partials/brand_mark.html) fills with `currentColor`, so its colour
 * is set here per ground. Default is coral (light grounds: login card, landing
 * nav); on the coral app bar it flips to white so all three ladder squares show.
 * The wordmark is two-tone: "Dream" + "Ladder", coloured per ground to match. */

/* Mark: coral on light grounds by default … */
.brand-mark { color: var(--color-brand); }
/* … white on the coral app bar (fixes the "one square" bug). */
.member-ai-topbar .brand-mark,
.pv-brand-logo .brand-mark { color: #fff; }

/* Wordmark base. Fraunces to match the login/landing display face. */
.dl-wordmark {
  font-family: "Fraunces", "Georgia", serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  margin-left: 3px;
}
/* Light grounds (login, landing): "Dream" near-black, "Ladder" coral. */
.dl-wordmark .dl-dream  { color: #2A1F1D; }
.dl-wordmark .dl-ladder { color: var(--color-brand); }
/* Coral app bar: "Dream" warm-cream, "Ladder" white (wordmark Option B). */
.member-ai-topbar .dl-wordmark .dl-dream  { color: #F7E3DF; }
.member-ai-topbar .dl-wordmark .dl-ladder { color: #ffffff; }
/* Very narrow bars: drop the wordmark so the scope dropdown keeps room. */
@media (max-width: 360px) {
  .member-ai-topbar .dl-wordmark { display: none; }
}

/* ── dl26 · Ask-AI (/ask) coral fixes (DL-B-038) ─────────────────────────────
 * chat.html's inline <style> hardcodes engine green literals (#124b38, #2D4538,
 * #0A4D43, #7FA58A, #F0F7F3) that the variable-only theme can't reach — which is
 * why the "Ask DreamLadder AI" surface still read green. Rather than edit the
 * SHARED chat.html (which would shift Arogya's colours), we override just those
 * selectors here: DreamLadder-only (this stylesheet loads only for DL), with
 * !important because chat.html's inline <style> follows this <link> in source
 * order. Arogya's chat.html is untouched. */
.chat-bubble.user,
.chat-avatar.user      { background: var(--color-teal-900) !important; }
.chat-hist-thumb-doc   { color: var(--color-teal-900) !important; }
.chat-chip.on {
  border-color: var(--color-teal-900) !important;
  background:   var(--color-teal-900) !important;
  box-shadow:   rgba(var(--color-brand-rgb), 0.25) 0 2px 8px !important;
}
.chat-sugg:hover {
  border-color: var(--color-teal-200) !important;
  color:        var(--color-teal-900) !important;
  background:   var(--color-teal-50)  !important;
}
.chat-bubble.ai a[href*="/calendar"]:hover { background: var(--color-brand-primary-strong) !important; }
.ask-chart-link:hover                       { color:      var(--color-brand-primary-strong) !important; }