/* ============================================================
   simplechat-tokens.css — Claren Health design tokens
   Single source of truth for the patient-facing chat surface
   (chat_base.html) and the onboarding page (auth_base.html).
   Sourced from the design handoff at
   .context/attachments/simplified-ui-handoff/.../colors_and_type.css
   and chat-variation-a/colors_and_type.css. Values match
   precisely — this file just consolidates them so onboarding and
   chat share one declaration.
   ============================================================ */

:root {
  /* ── Brand palette — main scheme (greens) ───────────────────────────── */
  --claren-hero-bg:     #113c2a;
  --claren-charcoal:    #113c2a;          /* alias: legacy chat usage */
  --claren-muted-green: #217c4d;
  --claren-olive:       #217c4d;          /* alias */
  --claren-sage:        #a4cab8;
  --claren-pale-green:  #d4e5db;
  --claren-sage-tint:   rgba(164, 202, 184, 0.15);
  /* WCAG AA 1.4.3: --claren-gray (#918c89) is ~3.1:1 on white — fails AA
     for body text. --claren-text-muted lifts to ~5.7:1 while keeping a
     muted feel. Use for any visible muted/secondary text. */
  --claren-text-muted:  #6c6c6c;

  /* ── Accents (treatment-options legend, etc.) ───────────────────────── */
  --claren-teal:        #2ec4b6;
  --claren-teal-deep:   #1f6a63;
  --claren-teal-tint:   #d5f3f0;
  --claren-coral:       #ff8356;
  --claren-coral-deep:  #ff632a;
  --claren-coral-tint:  #ffd3c3;
  --claren-gold:        #e3bf02;
  --claren-gold-deep:   #957204;
  --claren-gold-tint:   #f5edca;

  /* ── Neutrals ───────────────────────────────────────────────────────── */
  --claren-cream:       #fefefe;
  --claren-cream-warm:  #faf7f2;
  --claren-ink:         #121110;
  --claren-gray-dark:   #47403a;
  --claren-gray:        #918c89;
  --claren-gray-mid:    #a7a7a7;
  --claren-gray-faint:  #f4f9f6;
  /* Honest hairline neutral — the lightest named gray in the system.
     Backs --border-hairline; use it (or the alias) for 1px dividers,
     control borders, and inset rules. Not for text (fails AA). */
  --claren-gray-light:  #d9d9d9;

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --claren-error:       #c26b5b;
  --claren-error-bg:    #fce4ec;
  --claren-success:     #217c4d;
  --claren-success-bg:  #e8f5e9;

  /* ── Foreground / background semantics ──────────────────────────────── */
  --fg1:                var(--claren-hero-bg);    /* primary text   */
  --fg2:                var(--claren-gray-dark);  /* secondary text */
  --fg3:                var(--claren-gray);       /* muted / meta   */
  --fg-on-dark:         var(--claren-cream);

  --bg1:                var(--claren-cream);      /* page surface   */
  --bg2:                var(--claren-cream-warm); /* sidebar / inset */
  --bg3:                var(--claren-gray-faint); /* subtle panel   */
  --bg-dark:            var(--claren-hero-bg);

  --border-soft:        var(--claren-sage);
  --border-hairline:    var(--claren-gray-light);

  /* ── Type families ──────────────────────────────────────────────────── */
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Lora", "Source Serif 4", Georgia, serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Legacy chat aliases — keep until existing references migrate */
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);

  /* ── Radii ──────────────────────────────────────────────────────────── */
  /* DS scale: 4 / 6 / 8 / 12 / 20 / 28 / 999 */
  --radius-xs:   4px;
  --radius-sm:   6px;     /* small chips, alert badges, narrow controls */
  --radius:      8px;     /* default — buttons, inputs */
  --radius-md:   12px;
  --radius-lg:   20px;    /* cards, large panels */
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  /* Green-tinted per Claren DS — rgba(17, 60, 42, …) is --claren-hero-bg
     (#113c2a) expressed as rgb so the alpha works. Do not substitute back
     to var(--claren-hero-bg) inside the rgba. */
  --shadow-sm:    0 1px 2px   rgba(17, 60, 42, 0.06);
  --shadow:       0 4px 12px  rgba(17, 60, 42, 0.10);   /* default cards */
  --shadow-md:    0 8px 24px  rgba(17, 60, 42, 0.12);
  --shadow-lg:    0 18px 48px rgba(17, 60, 42, 0.16);
  --shadow-xl:    0 20px 60px rgba(17, 60, 42, 0.16);
  --shadow-focus: 0 0 0 3px rgba(33, 124, 77, 0.18);

  /* ── Overlays / scrims ──────────────────────────────────────────────── */
  /* Green-tinted, never gray (same rule as shadows — rgb is
     --claren-hero-bg). Two grades:
       --overlay-scrim         light dim for inline/transient surfaces
                               (e.g. voice-mode soft scrim).
       --overlay-scrim-strong  modal-grade backdrop behind a focused
                               surface that traps interaction (mobile
                               off-canvas sidebar, drawer bottom-sheet). */
  --overlay-scrim:        rgba(17, 60, 42, 0.10);
  --overlay-scrim-strong: rgba(17, 60, 42, 0.35);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:        120ms;
  --dur:             220ms;
  --dur-slow:        420ms;
  /* Legacy shorthand transitions — kept for existing references */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ── Bot-lead italic accent (Phase 3 streaming) ─────────────────────── */
/* First sentence of a streaming bot reply renders in Lora italic. The
   stream-time DOM post-processor in chat.js wraps the first sentence in
   <em class="bot-lead"> after sentence-boundary detection. */
.bot-lead {
  font-family: var(--font-display);
  font-style: italic;
}

/* ── DOB pill primitive ─────────────────────────────────────────────── */
/* Three-part date-of-birth input (MM / DD / YYYY). Markup lives in the
   shared partial `templates/llmchat/partials/_dob_pill.html`; paste
   parsing + auto-advance live in `static/js/dob.js`. Used by both the
   onboarding form and the chat composer's `structured` mode. */
.dob-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dob-input__part {
  display: flex;
  flex-direction: column;
}

.dob-input__sublabel {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--claren-text-muted);
  margin-bottom: 4px;
}

.dob-input__field {
  padding: 12px 12px;
  border: 1px solid var(--claren-sage);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--claren-hero-bg);
  background: #ffffff;
  text-align: center;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.dob-input__field--mm,
.dob-input__field--dd {
  width: 64px;
}

.dob-input__field--yyyy {
  width: 96px;
}

.dob-input__field:focus {
  outline: none;
  border-color: var(--claren-muted-green);
  box-shadow: var(--shadow-focus);
}

.dob-input__field::placeholder {
  color: var(--claren-gray);
  letter-spacing: 0.05em;
}

.dob-input__sep {
  color: var(--claren-gray);
  font-size: 1.25rem;
  padding-bottom: 10px;
  user-select: none;
}