:root {
  /* --- surface (light, Quantexa-style) --------------------- */
  --mq-paper: #ffffff;        /* page base */
  --mq-tint: #faf9ff;         /* alternating section */
  --mq-card: #f5f3ff;         /* card fill, lavender tint */
  --mq-edge: #e7e3f5;         /* hairlines */
  --mq-ink: #342243;          /* headings + body */
  --mq-mute: #6b6180;         /* secondary text */
  --mq-invert: #241733;       /* dark footer / band */

  /* --- brand ------------------------------------------------ */
  --mq-brand: #6b21a8;        /* primary purple */
  --mq-brand-soft: #c9b6f5;   /* CTA button fill */
  --mq-brand-2: #9333ea;      /* link hover; the hero gradient's end stop */
  --mq-accent: #00ff78;       /* spring green, sparingly */
  --mq-hero: linear-gradient(135deg, #2b1055 0%, #6b21a8 55%, #9333ea 100%); /* @kind color */
  --mq-band: linear-gradient(90deg, #4c1d95 0%, #6b21a8 45%, #00c98a 100%); /* @kind color */

  /* --- data (tables and charts ONLY, never chrome) ---------- */
  --mq-won: #0f9d58;
  --mq-lost: #d93025;
  --mq-watch: #e8a33d;

  /* --- semantic aliases ------------------------------------- */
  --page-bg: var(--mq-paper);
  --surface-section: var(--mq-tint);
  --surface-card: var(--mq-card);
  --surface-invert: var(--mq-invert);
  --border-hairline: var(--mq-edge);
  --text-heading: var(--mq-ink);
  --text-body: var(--mq-ink);
  --text-secondary: var(--mq-mute);
  --text-eyebrow: var(--mq-brand);
  --text-link: var(--mq-brand);
  --text-link-hover: var(--mq-brand-2);
  --action-primary-bg: var(--mq-brand-soft);
  --action-primary-fg: var(--mq-ink);
  --action-primary-bg-hover: var(--mq-brand);
  --action-primary-fg-hover: #ffffff;
  --focus-ring: var(--mq-brand);
  --data-positive: var(--mq-won);
  --data-negative: var(--mq-lost);
  --data-flagged: var(--mq-watch);
}