:root{
  /* ---- Base neutrals (cool, blue-leaning) ---- */
  --ink-1:#06122E;   /* headings, numerals */
  --ink-2:#1B2647;   /* strong body */
  --ink-3:#4A5678;   /* body */
  --ink-4:#646D93;   /* secondary / captions */
  --ink-5:#8E99B8;   /* muted, placeholder */
  --ink-6:#B4BDD2;   /* disabled, chart axis */

  --white:#FFFFFF;
  --paper-1:#FBFCFD; /* app canvas */
  --paper-2:#F9FAFB; /* desk / outside frame */
  --paper-3:#F4F7FB; /* inset wells, hovered rows */
  --paper-4:#EDF2F9; /* pressed / selected row */

  --line-1:#F0F3F8; /* hairline inside cards */
  --line-2:#E6ECF5; /* card + control border */
  --line-3:#D6DFEC; /* stronger divider, input focus ring base */

  /* ---- Cobalt: the single action colour ---- */
  --cobalt-50:#EFF5FE;
  --cobalt-100:#DEEAFD;
  --cobalt-200:#BBD4FB;
  --cobalt-300:#8AB4F8;
  --cobalt-400:#4A8BF6;
  --cobalt-500:#185EF3; /* primary */
  --cobalt-600:#0F4CD0;
  --cobalt-700:#0B3CA6;
  --cobalt-link:#0951F8;

  /* ---- Semantics ---- */
  --green-50:#DEF6E8;
  --green-400:#2FB56F;
  --green-500:#17A05A;
  --green-700:#0D5F27;

  --amber-50:#FDF2DA;
  --amber-500:#E39A0B;
  --amber-700:#8A5B02;

  --coral-50:#FEEDF0;
  --coral-400:#FB6B6E;
  --coral-500:#F5343A;
  --coral-700:#B4141A;

  /* ---- Channel brand colours (third-party marks) ---- */
  --ch-line:#06C755;
  --ch-facebook:#1877F2;
  --ch-instagram:#E1306C;
  --ch-website:#1B7FE0;
  --ch-email:#3B7DDD;
  --ch-whatsapp:#25D366;
  --ch-tiktok:#111111;

  /* ---- Semantic aliases: use these in components ---- */
  --surface-desk:var(--paper-2);
  --surface-app:var(--paper-1);
  --surface-card:var(--white);
  --surface-sunken:var(--paper-3);
  --surface-selected:var(--cobalt-50);
  --surface-band:#E7EEF8;        /* THE SIGNAL ribbon base */
  --surface-nav:#F9FBFC;

  --text-heading:var(--ink-1);
  --text-body:var(--ink-3);
  --text-muted:var(--ink-4);
  --text-faint:var(--ink-5);
  --text-inverse:var(--white);
  --text-link:var(--cobalt-link);
  --text-numeral:var(--ink-1);

  --border-card:var(--line-2);
  --border-hairline:var(--line-1);
  --border-strong:var(--line-3);
  --border-focus:var(--cobalt-500);

  --action-primary:var(--cobalt-500);
  --action-primary-hover:var(--cobalt-600);
  --action-primary-press:var(--cobalt-700);
  --action-secondary-bg:var(--white);
  --action-secondary-border:var(--cobalt-200);
  --action-ghost-hover:var(--cobalt-50);

  --state-good:var(--green-500);
  --state-good-bg:var(--green-50);
  --state-good-text:var(--green-700);
  --state-warn:var(--amber-500);
  --state-warn-bg:var(--amber-50);
  --state-warn-text:var(--amber-700);
  --state-risk:var(--coral-500);
  --state-risk-bg:var(--coral-50);
  --state-risk-text:var(--coral-700);

  --delta-up:var(--green-700);
  --delta-down:var(--coral-500);

  --track-ring:#E0E9F7;   /* gauge / progress track */
  --track-bar:#E9EEF6;
}