:root{
  /* Base palette — the whole brand. Nothing outside this set. */
  --mir-blue:#050E33;        /* Pantone 655 C · CMYK 100/79/12/59 · RGB 5/14/51 */
  --mir-grey:#808080;        /* Pantone Cool Gray 8 C · CMYK 0/0/0/50 */
  --mir-cream:#F4EDE0;
  --mir-white:#FFFFFF;

  /* Tints of Mirzam Blue — rules, scrims, disabled states only */
  --mir-blue-70:rgba(5,14,51,.70);
  --mir-blue-45:rgba(5,14,51,.45);
  --mir-blue-20:rgba(5,14,51,.20);
  --mir-blue-08:rgba(5,14,51,.08);
  --mir-cream-70:rgba(244,237,224,.70);
  --mir-cream-35:rgba(244,237,224,.35);

  /* Semantic — light ground */
  --text-primary:var(--mir-blue);
  --text-secondary:var(--mir-grey);
  --text-inverse:var(--mir-cream);
  --surface-page:var(--mir-cream);
  --surface-card:var(--mir-white);
  --surface-reverse:var(--mir-blue);
  --rule-hairline:var(--mir-grey);
  --rule-strong:var(--mir-blue);
  --frame-stroke:var(--mir-blue);
  --link:var(--mir-blue);
  --link-hover:var(--mir-grey);

  /* Semantic — reversed ground (inside .on-blue) */
  --safe-guide:#C9A227;
}
.on-blue{
  --text-primary:var(--mir-cream);
  --text-secondary:var(--mir-cream-70);
  --surface-card:var(--mir-blue);
  --rule-hairline:var(--mir-cream-35);
  --rule-strong:var(--mir-cream);
  --frame-stroke:var(--mir-cream);
  --link:var(--mir-cream);
  --link-hover:var(--mir-cream-70);
}