/*
 * tokens.css
 * Design tokens — all CSS custom properties for color and typography.
 * Load this before styles.css.
 */

:root {
  /* ── Base palette ─────────────────────────────────────────── */
  --navy:         #16233D;
  --navy-2:       #24345A;
  --ink:          #1B2028;
  --ink-soft:     #5B6270;
  --paper:        #F5F6F8;
  --card:         #FFFFFF;
  --line:         #DEE2E8;
  --line-strong:  #C4CAD3;

  /* ── Field-group accent colors ───────────────────────────── */
  --demo:         #2C5282;
  --demo-bg:      #E9F1FB;
  --demo-tab:     #DCE9F9;

  --ins:          #6B4C9A;
  --ins-bg:       #F1ECFA;
  --ins-tab:      #E6DCF6;

  --ledger:       #127A6A;
  --ledger-bg:    #E5F5F0;
  --ledger-tab:   #D3F0E5;

  --unmapped:     #966319;
  --unmapped-bg:  #FBF3E1;
  --unmapped-line:#D9A441;

  --brand:        #2563EB;
  --brand-bg:     #EFF4FF;

  --danger:       #B3261E;
  --danger-bg:    #FBEAEA;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-sans:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}