:root{
  /* --- Raw ramps --- */
  /* Red: sampled from the logo mark (#940812) and the CTA buttons (#e30814) */
  --red-100:#ffe3e5;--red-300:#ff6a72;--red-500:#ff1f2d;--red-600:#e30814;--red-700:#b8101a;--red-800:#940812;--red-900:#5c0509;
  /* Yellow: highlight / eyebrow badges (#ffc11d) */
  --yellow-300:#ffdc6b;--yellow-400:#ffc11d;--yellow-500:#ffb400;--yellow-700:#a77106;
  /* Green: enrollment CTA on the DSM course page (#2ca432) */
  --green-400:#43c94a;--green-500:#2ca432;--green-700:#1b7020;
  /* Neutrals: near-black stack, the brand's default ground */
  --black:#000000;--ink-950:#0a0a0a;--ink-900:#101010;--ink-850:#161616;--ink-800:#1c1c1c;--ink-700:#262626;--ink-600:#333333;
  --gray-500:#5c5c5c;--gray-400:#8a8a8a;--gray-300:#b3b3b3;--gray-200:#d6d6d6;--gray-100:#ededed;--white:#ffffff;

  /* --- Semantic: brand --- */
  --brand-red:var(--red-600);
  --brand-red-deep:var(--red-800);
  --brand-yellow:var(--yellow-400);
  --brand-green:var(--green-500);
  /* Official call-to-action colour on every surface. Red stays the identity colour. */
  --cta:var(--brand-green);
  --cta-hover:var(--green-400);
  --cta-text:var(--white);

  /* --- Semantic: surfaces (dark is the default theme) --- */
  --surface-page:var(--black);
  --surface-raised:var(--ink-900);
  --surface-card:var(--ink-850);
  --surface-card-hover:var(--ink-800);
  --surface-inset:var(--ink-950);
  --surface-inverse:var(--white);
  --surface-brand:var(--brand-red);
  --surface-brand-quiet:rgba(227,8,20,.12);
  --surface-yellow:var(--brand-yellow);

  /* --- Semantic: text --- */
  --text-title:var(--white);
  --text-body:var(--gray-300);
  --text-muted:var(--gray-400);
  --text-highlight:var(--brand-yellow);
  --text-on-brand:var(--white);
  --text-on-yellow:var(--black);
  --text-inverse:var(--ink-900);
  --text-link:var(--brand-yellow);
  --text-link-hover:var(--yellow-300);

  /* --- Semantic: borders --- */
  --border-hairline:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.18);
  --border-brand:var(--brand-red);
  --border-yellow:var(--brand-yellow);

  /* --- Semantic: state --- */
  --state-success:var(--brand-green);
  --state-danger:var(--red-600);
  --state-warning:var(--brand-yellow);
  --state-focus:var(--yellow-400);
}

/* Light scope — printed material, e-mail, light sections. Apply on any container. */
.lo-light{
  --surface-page:var(--white);
  --surface-raised:var(--gray-100);
  --surface-card:var(--white);
  --surface-card-hover:var(--gray-100);
  --surface-inset:var(--gray-100);
  --surface-inverse:var(--black);
  --text-title:var(--ink-900);
  --text-body:var(--gray-500);
  --text-muted:var(--gray-400);
  --text-highlight:var(--red-700);
  --text-link:var(--red-700);
  --text-link-hover:var(--red-600);
  --border-hairline:rgba(0,0,0,.10);
  --border-strong:rgba(0,0,0,.22);
}