/* ============================================================================
   Answers — Design Tokens
   Extracted from the Claude Design project
   (965a07a0-d3ab-47ad-8f88-10826905af40) — "Answers App.dc.html" + ios-frame.jsx.
   These are the single source of truth for the chat embed's custom CSS layer.
   The matching JS values that feed Web Chat's `styleOptions` live in
   js/answers-webchat.js — keep the two in sync.
   ========================================================================== */

:root {
  /* ---- Brand blues -------------------------------------------------------- */
  --ans-navy-900: #0a2a4e;   /* deepest navy — primary text on light          */
  --ans-navy-800: #08233f;   /* gradient top                                  */
  --ans-blue-700: #003767;   /* NBN blue — primary brand / bot bubble accent  */
  --ans-blue-600: #0a4a82;   /* gradient bottom                               */
  --ans-blue-500: #1e5fa8;   /* medium blue — links, active, user-bubble top  */
  --ans-blue-300: #56a0d3;   /* light blue — logo accent                      */

  /* ---- Gold + status ------------------------------------------------------ */
  --ans-gold:      #d4a04a;  /* NBN gold — progress / highlight               */
  --ans-green:     #1f8a5b;  /* online / success                              */

  /* ---- Neutrals (cool, biased toward the brand blue) ---------------------- */
  --ans-canvas:    #eef1f6;  /* chat background (cool gray)                   */
  --ans-surface:   #ffffff;  /* cards / bot bubbles                           */
  --ans-line:      #e3e9f1;  /* hairline borders                              */
  --ans-line-soft: rgba(10, 40, 80, 0.06); /* bubble hairline                 */
  --ans-slate:     #5a6c84;  /* secondary text                                */
  --ans-slate-400: #7587a0;  /* timestamps / muted                            */
  --ans-ink:       #1b2f48;  /* bot bubble body text                          */

  /* ---- Gradients ---------------------------------------------------------- */
  --ans-grad-user:   linear-gradient(140deg, #1e5fa8, #003767);
  --ans-grad-avatar: linear-gradient(150deg, #0d4d86, #00305c);
  --ans-grad-brand:  linear-gradient(155deg, #0a2a4e, #003767 70%, #0a4a82);

  /* ---- Typography --------------------------------------------------------- */
  --ans-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ans-font-display: Georgia, "Times New Roman", serif;
  --ans-fs-msg: 12.5px;   /* message body (1px smaller than 13.5px, per 2026-07-03 feedback) */
  --ans-fs-meta: 12.5px;  /* status / labels                                  */
  --ans-lh-msg: 1.5;

  /* ---- Radii -------------------------------------------------------------- */
  --ans-r-bubble: 18px;   /* bubble corner                                    */
  --ans-r-tail: 5px;      /* bubble "tail" corner                             */
  --ans-r-chip: 13px;     /* suggested-action chips                           */
  --ans-r-card: 18px;
  --ans-r-input: 14px;

  /* ---- Elevation ---------------------------------------------------------- */
  --ans-shadow-bot: 0 1px 2px rgba(7, 30, 60, 0.05);
  --ans-shadow-user: 0 4px 12px rgba(0, 55, 103, 0.22);
  --ans-shadow-card: 0 1px 2px rgba(7, 30, 60, 0.05), 0 8px 22px rgba(7, 30, 60, 0.05);
  --ans-shadow-header: 0 1px 0 rgba(10, 40, 80, 0.06);
}