/* =========================================================
   Assort Finance Hub — design tokens
   Source of truth: 04 Master Documents/Design_System.md §5
   Update master MD FIRST, then mirror changes here.
   ========================================================= */

/* FH-038 (2026-05-24): display=optional kills the FOUT shift that drove
   /us CLS to 0.50. If DM Sans doesn't arrive in ~100ms the system stack
   stays for the session; the 3 returning Hub users cache it after the
   first visit, so the no-swap is a clear UX win. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=optional');

:root {
  color-scheme: light;

  /* ---------- Surfaces + lines ---------- */
  --bg:           #fafafa;
  --canvas:       #f0f0f5;
  --card:         #ffffff;
  --card-soft:    #f5f5f7;
  --surface-tint: #f0f0f5;
  --backdrop:     rgba(0, 0, 0, 0.32);

  --border:        #e5e5ea;
  --border-soft:   #f0f0f2;
  --border-strong: #d8d8de;
  --divider:       #ececf0;

  /* ---------- Foreground (text) ---------- */
  --text:     #1a1a1a;
  --text2:    #8e8e93;
  --text3:    #c7c7cc;
  --text-inv: #ffffff;

  /* ---------- Brand-mark, accent, primary action ---------- */
  --brand-mark:  #007AFF;
  --accent:      #1a1a1a;
  --accent-deep: #000000;
  --accent-soft: #f0f0f5;
  --accent-line: #d8d8de;
  --primary:     #007AFF;
  --primary-deep:#0062cc;

  /* ---------- Teal accent ramp (FH-024) ----------
     The KL-007 /vendor-review redesign renamed every interactive accent to
     --teal* but never defined the family, so selected rows, primary buttons,
     checkmarks and the bulk-confirm button silently resolved to nothing.
     This completes the ramp from the brand-teal anchor (--brand-mark #0F766E)
     the redesign already committed to — derived tint/shade, not a new design
     direction. Bespoke re-tuning, if ever wanted, belongs in the design pass. */
  --teal:        #007AFF;
  --teal-deep:   #0062cc;
  --teal-soft:   #F0F5FF;
  --teal-ink:    #0062cc;
  --teal-line:   #B7D4FF;

  /* ---------- Semantic: money + state ---------- */
  --in:       #1F8A5B;
  --in-soft:  #E4F1EA;
  --in-line:  #BAD9C7;
  --out:      #B33A3A;
  --out-soft: #F5E4E3;
  --out-line: #E2BCBA;

  --warn:         #FF9500;
  --warn-soft:    #FFF4E5;
  --warn-line:    #FFD9A6;
  --info:         #007AFF;
  --info-soft:    #F0F5FF;
  --info-line:    #B7D4FF;
  --neutral:      #5b5b60;
  --neutral-soft: #ececf0;
  --void:         #8e8e93;
  --void-soft:    #f0f0f2;

  /* ---------- Type ---------- */
  --font-ui:   'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --eyebrow-size: 11px;  --eyebrow-track: 1.2px; --eyebrow-weight: 700;
  --label-size:   12px;  --label-weight: 600;
  --body-sm:      13px;
  --body:         14px;
  --body-lg:      15px;
  --h3:           16px;  --h3-weight: 600;
  --h2:           18px;  --h2-weight: 700;
  --h1:           24px;  --h1-weight: 700;
  --metric-sm:    20px;
  --metric:       28px;
  --metric-lg:    36px;

  /* ---------- Spacing ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.03);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.12);

  /* ---------- Density (Tweaks-driven; default Medium) ---------- */
  --row-pad-y: 10px;
  --card-pad: 20px;
}

[data-density="roomy"] {
  --row-pad-y: 14px;
  --card-pad: 24px;
}