:root{
  /* --- Brand core (sampled from the supplied logo files) --- */
  --teal-950:#061E22;
  --teal-900:#0A2C31;
  --teal-800:#0F3D44; /* BRAND PRIMARY — monogram, wordmark "BC" */
  --teal-700:#17545E;
  --teal-600:#1F6B78;
  --teal-500:#2A8494;
  --teal-300:#8FB9C0;
  --teal-100:#D6E5E8;
  --teal-50:#EEF5F6;

  --cyan-800:#1E6F81;
  --cyan-700:#2E8FA4;
  --cyan-600:#3EA1B8;
  --cyan-500:#4FB3C8; /* BRAND ACCENT — light-background monogram */
  --cyan-400:#74C6D6;
  --cyan-300:#96D5E1;
  --cyan-200:#B6E1EA;
  --cyan-100:#D5EEF3;
  --cyan-50:#EAF6F9;

  /* --- Neutrals (sampled: 600 / 400 / 200 come straight from the logo) --- */
  --gray-950:#101314;
  --gray-900:#1C1F21;
  --gray-800:#2A2E31;
  --gray-700:#3C4145;
  --gray-600:#5F6368; /* wordmark "Tech Solutions" grey */
  --gray-550:#6B7075; /* darkest grey that still reads as secondary — 5.0:1 on white */
  --gray-500:#7C8288;
  --gray-400:#9AA0A6; /* muted grey */
  --gray-300:#C4C9CE;
  --gray-200:#E1E4E8; /* reversed wordmark grey */
  --gray-150:#EAECEF;
  --gray-100:#EFF1F3;
  --gray-50:#F7F8F9;
  --white:#FFFFFF;

  /* Third-party brand colour — permitted ONLY on the WhatsApp button. */
  --whatsapp-500:#25D366;
  /* WhatsApp green is very light: white text on it is 1.98:1. Labels use deep teal ink (7.5:1). */
  --whatsapp-ink:var(--teal-900);

  /* --- Semantic status --- */
  --green-700:#186845; /* text on green-100 */
  --green-600:#1F7F55;
  --green-500:#2E9E6B;
  --green-100:#DCF0E7;
  --amber-700:#8C5214; /* text on amber-100 */
  --amber-600:#B36A1C;
  --amber-500:#D9822B;
  --amber-100:#FBEBD8;
  --red-700:#8E2B25;   /* text on red-100 */
  --red-600:#A5332C;
  --red-500:#C7433B;
  --red-100:#F8E1DF;

  /* --- Semantic aliases: surfaces --- */
  --surface-page:var(--white);
  --surface-subtle:var(--gray-50);
  --surface-sunken:var(--gray-100);
  --surface-card:var(--white);
  --surface-inverse:var(--teal-800);
  --surface-inverse-deep:var(--teal-950);
  --surface-accent-soft:var(--cyan-50);
  --surface-brand-soft:var(--teal-50);

  /* --- Semantic aliases: text --- */
  --text-heading:var(--teal-800);
  --text-body:var(--gray-600);
  --text-muted:var(--gray-550);
  --text-disabled:var(--gray-400);
  --text-inverse:var(--white);
  --text-inverse-muted:var(--gray-200);
  --text-accent:var(--cyan-800);
  --text-link:var(--cyan-800);
  --text-link-hover:var(--teal-800);
  --text-on-brand:var(--white);

  /* --- Semantic aliases: borders --- */
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --border-brand:var(--teal-800);
  --border-accent:var(--cyan-500);
  --border-inverse:rgba(255,255,255,.18);

  /* --- Semantic aliases: interactive --- */
  --action-primary-bg:var(--teal-800);
  --action-primary-bg-hover:var(--teal-700);
  --action-primary-bg-active:var(--teal-900);
  --action-accent-bg:var(--cyan-500);
  --action-accent-bg-hover:var(--cyan-400);
  --action-accent-bg-active:var(--cyan-600);
  /* Cyan is too light to carry white text (2.4:1). Accent controls use deep teal ink. */
  --action-accent-fg:var(--teal-900);
  --focus-ring:var(--cyan-500);
  --focus-ring-halo:rgba(79,179,200,.32);
}