:root{
  /* ---- Ink (Black) ---- */
  --black-100:rgb(26,26,26);
  --black-85:rgba(26,26,26,.85);
  --black-70:rgba(26,26,26,.7);
  --black-50:rgba(26,26,26,.5);
  --black-30:rgba(26,26,26,.3);
  --black-10:rgba(26,26,26,.1);
  --black-5:rgba(26,26,26,.05);
  --black-0:rgba(26,26,26,0);
  --black-highlight:rgb(36,36,36);

  /* ---- Background (Bg) ---- */
  --bg-100:rgb(251,252,248);
  --bg-85:rgba(251,252,248,.85);
  --bg-70:rgba(251,252,248,.7);
  --bg-50:rgba(251,252,248,.5);
  --bg-30:rgba(251,252,248,.3);
  --bg-20:rgba(251,252,248,.1);
  --bg-10:rgba(251,252,248,.05);
  --white:rgb(255,255,255);

  /* ---- Accent surfaces ---- */
  --highlight:rgb(233,235,228);
  --highlight-50:rgba(233,235,228,.5);

  /* ---- Data accents (sampled from product UI; use sparingly, dots & charts only) ---- */
  --data-blue:#3b6fe0;
  --data-orange:#f5883e;
  --data-green:#2fa84f;
  --data-magenta:#c93fa5;

  /* ---- Status ---- */
  --status-positive:#1f9e56;
  --status-negative:#c8452f;
  --status-pending:#c8811f;

  /* ================= Semantic aliases ================= */
  --text-primary:var(--black-100);
  --text-strong:var(--black-85);
  --text-secondary:var(--black-70);
  --text-tertiary:var(--black-50);
  --text-disabled:var(--black-30);
  --text-inverse:var(--bg-100);
  --text-inverse-secondary:var(--bg-70);

  --surface-page:var(--bg-100);
  --surface-card:var(--white);
  --surface-sunken:var(--highlight);
  --surface-subtle:var(--black-5);
  --surface-inverse:var(--black-100);
  --surface-inverse-raised:var(--black-highlight);
  --surface-scrim:var(--bg-85);

  --border-hairline:var(--black-10);
  --border-strong:var(--black-30);
  --border-inverse:rgba(255,255,255,.12);

  --action-primary-bg:var(--black-100);
  --action-primary-bg-hover:var(--black-highlight);
  --action-primary-fg:var(--bg-100);
  --action-secondary-bg:var(--white);
  --action-secondary-fg:var(--black-100);
  --action-secondary-border:var(--black-10);
  --action-ghost-fg:var(--black-70);

  /* Fade-to-page protection gradient (marquees, scroll edges) */
  --fade-page-right:linear-gradient(90deg,var(--bg-100) 0%,rgba(251,252,248,0) 100%); /* @kind other */
  --fade-page-left:linear-gradient(270deg,var(--bg-100) 0%,rgba(251,252,248,0) 100%); /* @kind other */
  /* Dotted field used behind dark cards and section backgrounds */
  --pattern-dot:radial-gradient(var(--black-10) 1px,transparent 1px); /* @kind other */
  --pattern-dot-inverse:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); /* @kind other */
  --pattern-dot-size:16px 16px; /* @kind other */
}