/* LoanSwipe design tokens — extracted from the shipped canvas frames 2026-09-02.
   Values are copied out of the frames, not retyped from memory.
   Drop this in first; every component rule below assumes these exist. */

:root {
  /* ---- surface ladder ---------------------------------------------- */
  --ls-canvas:        #F9FAFC;   /* page background behind every card    */
  --ls-nav:           #EFF1F9;   /* left sidebar                         */
  --ls-surface:       #FFFFFF;   /* cards, chat pane, popovers           */
  --ls-surface-tint:  rgba(239,241,249,.6);  /* frosted list column      */

  /* ---- ink ladder --------------------------------------------------- */
  --ls-ink:           #16161A;   /* primary text                         */
  --ls-ink-2:         #6B6B73;   /* secondary text                       */
  --ls-ink-3:         #9C9CA4;   /* captions, placeholders, empty states */

  /* ---- brand -------------------------------------------------------- */
  --ls-blue:          #194698;   /* wordmark, selected nav text          */
  --ls-blue-bright:   #2388FF;   /* accent: focus, active tints          */
  --ls-blue-deep:     #1E5FC2;   /* approval card gradient start         */
  --ls-blue-deeper:   #123A7E;   /* approval card gradient end           */
  --ls-sel:           rgba(35,136,255,.12);  /* selected row pill        */

  /* ---- hairlines and rings (all blue-tinted, never neutral grey) ---- */
  --ls-ring:          rgba(25,70,152,.05);   /* card ring                */
  --ls-line:          rgba(25,70,152,.08);   /* dividers, nav edge       */
  --ls-line-soft:     rgba(25,70,152,.06);   /* table row separators     */

  /* ---- radii (function decides, not size) --------------------------- */
  --ls-r-card:        18px;  /* page-level cards, chat pane, list column */
  --ls-r-panel:       16px;  /* inner panels, guide cards               */
  --ls-r-field:       12px;  /* inputs, filter pills, dropdown menus     */
  --ls-r-row:         11px;  /* nav tabs                                */
  --ls-r-inner:       9px;   /* status rows, small controls             */
  --ls-r-chip:        7px;   /* status chips                            */
  --ls-r-pill:        999px; /* rep chip, fully round controls          */

  /* ---- elevation (only two, both blue-tinted) ----------------------- */
  --ls-shadow-card:   0 0 0 1px rgba(25,70,152,.05);
  --ls-shadow-pop:    0 16px 36px rgba(22,22,26,.22), 0 0 0 1px rgba(25,70,152,.09);

  /* ---- motion: one easing family, three durations -------------------- */
  --ls-ease:          cubic-bezier(.22,.9,.3,1);
  --ls-ease-b:        cubic-bezier(.4,0,.2,1);
  --ls-fast:          .15s;   /* hover tints                            */
  --ls-base:          .25s;   /* dropdowns, panel swaps                 */
  --ls-travel:        .34s;   /* the selection pill moving              */

  /* ---- control heights (three only) --------------------------------- */
  --ls-h-tab:         32px;  /* nav tab, status row                     */
  --ls-h-control:     38px;  /* filter pill, search, view switcher      */
  --ls-h-btn:         30px;  /* compact action button in panes          */

  /* ---- layout ------------------------------------------------------- */
  --ls-nav-w:         218px; /* sidebar                                 */
  --ls-list-w:        390px; /* deal list column (search matches this)  */
}

/* ---- type ----------------------------------------------------------- */
/* One stack, system-first. No webfont is loaded — do not add one.        */
body, .lsw {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
}
/* Scale actually used (there is no 18–24px mid-range by design):
   29px  approval card amount (700)
   20px  stat band value (650)
   15px  deal name in the chat header (650)
   13px  section headings (650) / body copy in panes
   12.5px nav tabs, status rows, table cells, filter pills (500)
   11.5px secondary lines, hints, chip labels
   10.5px status chip text, stat labels (650, .06em tracking, uppercase)
   9.5px  approval card label (650, .14em tracking, uppercase)          */

/* ---- status tones ---------------------------------------------------
   ONE tone per status, used for chip text + chip tint + timeline dot.
   Never invent a status colour outside this table.                      */
.ph-new       { color: #8A6420 } /* Submitted */
.ph-nego      { color: #1E5FC2 } /* Approved  */
.ph-contract  { color: #0E7490 } /* Closing   */
.ph-closed    { color: #1B8A4A } /* Funded    */
.ph-stalled   { color: #B45A1F } /* Stalled   */
.ph-declined  { color: #C24141 } /* Declined  */

.pchip { background: var(--ls-ring); color: var(--ls-ink-2); font-size: 10.5px;
         font-weight: 600; padding: 3px 8px; border-radius: var(--ls-r-chip);
         letter-spacing: .01em }
/* A chip carrying a status gets a 1px border in its own colour + a tint: */
.pchip[class*="ph-"]   { padding: 5px; border: 1px solid currentColor }
.pchip.ph-new          { background: rgba(185,138,47,.10) }
.pchip.ph-nego         { background: rgba(35,136,255,.09) }
.pchip.ph-contract     { background: rgba(14,116,144,.09) }
.pchip.ph-closed       { background: rgba(27,138,74,.10) }
.pchip.ph-stalled      { background: rgba(212,122,43,.09) }
.pchip.ph-declined     { background: rgba(194,65,65,.08) }