/* InvPro Design Tokens — drop into your global stylesheet */
:root {
  /* Brand */
  --invpro-emerald: #12855C; /* primary — brand, primary actions */
  --invpro-pine:    #0C5C40; /* primary dark — hover / pressed, accents on light */
  --invpro-amber:   #E4A23A; /* accent — expenses, warnings, highlights (use sparingly) */

  /* Neutrals */
  --invpro-ink:     #15201B; /* default text, dark surfaces */
  --invpro-body:    #3A4640; /* secondary body text */
  --invpro-muted:   #7A867F; /* captions, metadata, placeholders */
  --invpro-line:    #E2E7E2; /* borders, dividers */
  --invpro-mist:    #EDF3EE; /* tinted surface / section bands / subtle fills */
  --invpro-paper:   #FAF9F5; /* app background */
  --invpro-white:   #FFFFFF; /* cards */

  /* Typography */
  --invpro-font-display: 'Space Grotesk', sans-serif; /* headings, wordmark, big numbers */
  --invpro-font-body:    'IBM Plex Sans', sans-serif;  /* UI, paragraphs, labels */
  --invpro-font-mono:    'IBM Plex Mono', monospace;   /* amounts, invoice IDs, dates (tabular) */

  /* Radius */
  --invpro-radius-sm: 9px;   /* small controls, chips */
  --invpro-radius-md: 12px;  /* buttons, inputs */
  --invpro-radius-lg: 18px;  /* cards */
  --invpro-radius-xl: 24px;  /* app icon, hero surfaces */

  /* Shadow */
  --invpro-shadow-card: 0 24px 60px rgba(0,0,0,0.10);
  --invpro-shadow-brand: 0 12px 40px rgba(18,133,92,0.30);
}