/* 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-300:    #E3A6A0;  /* dl36 K5: coral chat-composer outline (was #6ECBA9 mint) */
  --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. */

/* dl31 — the mark is now the circular badge <img> (partials/brand_mark.html), a
   self-contained disc that reads on any ground, so the old `currentColor` recolour
   no longer applies. Shape + alignment only. */
.brand-mark { display: inline-block; vertical-align: middle; border-radius: 50%; }

/* 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); }
/* dl31 — append the ".in" TLD so the text wordmark reads "DreamLadder.in", matching
   the logo lockup. Inherits .dl-ladder's colour: coral on light, white on the coral bar. */
.dl-wordmark .dl-ladder::after { content: ".in"; }
/* 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; }
/* dl33 — sidebar rail sits on the coral brand colour, so its wordmark is light too. */
.ws-rail-brand .dl-wordmark--rail { font-size: 17px; margin-left: 2px; }
.ws-rail-brand .dl-wordmark--rail .dl-dream  { color: #F7E3DF; }
.ws-rail-brand .dl-wordmark--rail .dl-ladder { color: #ffffff; }
/* Very narrow bars: drop the wordmark so the scope dropdown keeps room.
   (The badge mark stays — it's the mobile logo.) */
@media (max-width: 360px) {
  .member-ai-topbar .dl-wordmark { display: none; }
}

/* dl31 — the full lockup image (mark + "DreamLadder.in") on the login card. */
.login-logo-lockup { display: block; width: 230px; max-width: 80%; height: auto; margin: 0 auto; }

/* ── 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; }

/* ══════════════════════════════════════════════════════════════════════════
 * dl35 · PLAYFUL PERSONA OVERRIDES  (ui-craft · Path B · approved 2 Aug 2026)
 * ──────────────────────────────────────────────────────────────────────────
 * The engine (dr9/dr10) ships a FLAT law — two weights, 4–12px radii, no
 * shadows, sentence case. DreamLadder's persona is the opposite: warm,
 * celebratory, huggable (Innocent + Caregiver — see the ui-craft persona
 * sketch). These overrides re-add that character for DreamLadder ONLY;
 * Arogya loads none of this file and stays flat. The engine accessibility
 * floor is preserved — :focus-visible rings + AA contrast stay untouched, and
 * motion dampens rather than deletes under prefers-reduced-motion.
 * ════════════════════════════════════════════════════════════════════════ */

/* Display face — Poppins (rounded geometric), self-hosted in the brand pack
 * (brands/dreamladder/static/fonts, served at /brand-static/fonts). Latin,
 * weights 600/700/800; body text stays on the engine's system sans. */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/poppins-800.woff2") format("woff2"); }

:root {
  /* Huggable radii — engine defaults were 4 / 8 / 12. */
  --border-radius-md: 12px;   /* was 8  */
  --border-radius-lg: 20px;   /* was 12 — cards + modals now soft */

  /* Warm the canvas a touch toward coral-cream (persona temperature 85). */
  --color-background-secondary: #FBF6F1;   /* was #F7F5EF */

  /* Soft warm coral-tinted elevation (the flat law stripped all shadows). */
  --dl-shadow:      0 6px 20px rgba(184,84,80,.12), 0 1px 3px rgba(42,31,29,.06);
  --dl-shadow-lift: 0 12px 28px rgba(184,84,80,.18), 0 2px 6px rgba(42,31,29,.08);

  /* Springy motion (persona motion_scale 1.25). */
  --dl-spring: cubic-bezier(.34,1.56,.64,1);
}

/* Bold rounded display headings — Poppins 700 (engine capped headings at 500). */
.ws-canvas h1, .ws-canvas h2, .ws-canvas h3,
.home-canvas h1, .home-canvas h2, .home-canvas h3,
.ws-main h1, .ws-main h2, .ws-main h3,
.arogya-card .ac-title, .st-row-title, .st-section-title {
  font-family: "Poppins", var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Signature — the app-wide .arogya-card (and settings rows) float: soft warm
 * shadow, huggable radius, springy hover-lift replacing the engine's flat
 * brightness-dim hover. */
.arogya-card,
.st-row, .st-section {
  border-radius: 16px;
  box-shadow: var(--dl-shadow);
  transition: transform 180ms var(--dl-spring), box-shadow 180ms ease, filter 140ms ease;
}
.arogya-card:hover,
.st-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--dl-shadow-lift);
  filter: none;
}

/* Home content panels + member cards get the same warm float. */
.home-iv-panel, .home-member-card { box-shadow: var(--dl-shadow); }

/* Reduced motion: keep the float, drop the movement (dampen, don't delete). */
@media (prefers-reduced-motion: reduce) {
  .arogya-card, .st-row, .st-section { transition: box-shadow 140ms ease; }
  .arogya-card:hover, .st-row:hover  { transform: none; }
}