:root{
  /* ---------- Brand red ramp (exact product values) ---------- */
  --mw-red-1:#c2204a;              /* primary brand red — gradient start */
  --mw-red-2:#dd1f2e;              /* gradient end */
  --mw-wordmark:#dd222e;           /* wordmark red */
  --mw-red-hover:#b01d43;          /* solid-fill hover */
  --mw-accent:#f02d39;             /* CTA red used on hero buttons */
  --mw-accent-hover:#ff4b55;
  --mw-accent-soft:#ff6b7a;        /* eyebrow text over photography */
  --mw-red-deep:#a31a3e;           /* link hover in email bodies */

  /* ---------- Ink & neutrals ---------- */
  --mw-ink:#1a1a1a;                /* 2026 brand ink — headings, dark bands */
  --mw-grey-dark:#3a3a3a;          /* legacy body/heading grey (portals) */
  --mw-grey-light:#747474;         /* muted body copy */
  --mw-bone:#f7f4ef;
  --mw-cream:#fbf7f1;
  --mw-panel:#fbfaf7;              /* warm feature-tile fill */

  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;             /* canonical border value in the product */
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;

  /* ---------- Connect division colours ---------- */
  --mw-passport:#c2204a;           /* Health Passport (consumer) */
  --mw-clinic:#2563eb;             /* Clinic Connect */
  --mw-insurance:#0d9488;          /* Insurance Connect */
  --mw-travel:#ea580c;             /* Traveler Connect */
  --mw-hospital:#7c3aed;           /* Hospital Connect */
  --mw-workplace:#16a34a;          /* Workplace Connect */

  /* ---------- Status / semantic ---------- */
  --mw-success:#16a34a;
  --mw-success-bg:#dcfce7;
  --mw-warning:#d97706;
  --mw-warning-bg:#fef3c7;
  --mw-danger:#ef4444;             /* system errors — deliberately more orange than brand red */
  --mw-danger-bg:#fee2e2;
  --mw-info:#2563eb;
  --mw-info-bg:#dbeafe;
  --mw-online:#10b981;             /* the "staff online" dot in portal sidebars */

  /* ---------- Semantic aliases ---------- */
  --text-heading:var(--mw-ink);
  --text-body:var(--slate-600);
  --text-muted:var(--mw-grey-light);
  --text-portal-heading:var(--mw-grey-dark);
  --text-on-brand:#ffffff;
  --text-eyebrow:var(--mw-red-1);
  --text-eyebrow-on-photo:var(--mw-accent-soft);

  --surface-page:#ffffff;
  --surface-subtle:#f8f9fa;
  --surface-app:var(--slate-50);   /* portal content background */
  --surface-card:#ffffff;
  --surface-tile:var(--mw-panel);
  --surface-dark:var(--mw-ink);
  --surface-portal-nav:var(--slate-900);
  --surface-input:#f1f5f9;

  --border-default:var(--slate-200);
  --border-hairline:var(--slate-100);
  --border-brand-ghost:rgba(194,32,74,.30);
  --border-on-dark:rgba(255,255,255,.10);

  --focus-ring:rgba(194,32,74,.20);

  /* ---------- Signature gradients ---------- */
  --gradient-brand:linear-gradient(to right,var(--mw-red-1),var(--mw-red-2)); /* @kind color */
  --gradient-brand-135:linear-gradient(135deg,var(--mw-red-1),var(--mw-red-2)); /* @kind color */
  --gradient-brand-soft:radial-gradient(ellipse at top right,rgba(254,242,242,.6),#ffffff 60%,#ffffff); /* @kind color */
  --gradient-hero-desktop:linear-gradient(105deg,rgba(15,20,35,.55) 0%,rgba(15,20,35,.38) 22%,rgba(15,20,35,.15) 45%,transparent 65%); /* @kind color */
  --gradient-hero-mobile:linear-gradient(180deg,rgba(10,14,28,.62) 0%,rgba(10,14,28,.32) 22%,rgba(10,14,28,.58) 62%,rgba(10,14,28,.86) 100%); /* @kind color */
  --gradient-card-scrim:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.75) 100%); /* @kind color */
  --gradient-tile-scrim:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.10) 55%,transparent); /* @kind color */
}