/* EverPay colour system.
   Rule of thumb: a page reads as BLACK-ON-WHITE with EMERALD moments.
   Never more than one accent colour competing for attention. Flat colour only. */
:root {
  /* ── Base palette ── */
  --ink: #0A0A0A;          /* primary text, structure, primary buttons, wordmark "Ever" */
  --ink-soft: #404040;     /* secondary body copy on white */
  --white: #FFFFFF;        /* dominant ground; text on ink/emerald */

  --green: #10B981;        /* EverPay Green — the single accent; wordmark "Pay", links, the mark */
  --green-700: #047857;    /* deep emerald — text on light emerald surfaces */
  --green-300: #6EE7B7;    /* charts / states only */
  --green-100: #D1FAE5;    /* accent border, received-money icon tile */
  --green-50:  #F0FDF4;    /* accent surface */

  --gray-50:  #F5F5F5;     /* surface, input fill, section background */
  --gray-100: #E5E5E5;     /* border, divider */
  --gray-400: #737373;     /* muted text, labels, captions, metadata */

  /* ── Semantic / status ── */
  --red: #EF4444;          /* destructive, error */
  --amber: #D97706;        /* bill / pending */
  --amber-surface: #FEF3C7;
  --blue: #3B82F6;         /* water / utility category */
  --blue-surface: #DBEAFE;

  /* ── Mobile-money network brand colours (badges only) ── */
  --net-airtel: #CC0000;
  --net-mtn: #FFCC00;      /* use --ink for text on MTN yellow */
  --net-zamtel: #003F87;

  /* ── Semantic aliases (prefer these in product code) ── */
  --background: var(--white);
  --foreground: var(--ink);
  --accent: var(--green);
  --accent-strong: var(--green-700);
  --accent-surface: var(--green-50);
  --accent-border: var(--green-100);
  --surface: var(--gray-50);
  --border: var(--gray-100);
  --muted-foreground: var(--gray-400);
  --destructive: var(--red);

  --text-body: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--gray-400);
  --on-accent: var(--white);   /* text/icon on emerald */
  --on-ink: var(--white);      /* text/icon on ink */
}