:root{
  /* ---- Base: the logo package ships exactly three colours ---- */
  --rift-blue:#009bff;
  --rift-black:#000000;
  --rift-white:#ffffff;

  /* ---- Neutral ramp (white-ground system) ---- */
  --n-0:#ffffff;
  --n-25:#fafafa;
  --n-50:#f2f2f2;
  --n-100:#e6e6e6;
  --n-200:#d8d8d8;
  --n-300:#bdbdbd;
  --n-400:#9a9a9a;
  --n-500:#8a8a8a;
  --n-600:#5c5c5c;
  --n-700:#3a3a3a;
  --n-800:#1c1c1c;
  --n-900:#000000;

  /* ---- Blue ramp (interaction + H2O variant) ---- */
  --blue-100:#d6efff;
  --blue-300:#66c6ff;
  --blue-500:#009bff;
  --blue-600:#007fd1;
  --blue-700:#0066a8;

  /* ---- Product variant colours ----
     Saturated blocks read against the black field of the pack.
     H2O reuses the brand blue; the rest are the variant spectrum. */
  --var-h2o:#009bff;
  --var-electrolytes:#c9ff3d;
  --var-vitamins:#ff5c35;
  --var-collagen:#ff4fa3;

  /* Ink to place on each variant block */
  --var-h2o-ink:#ffffff;
  --var-electrolytes-ink:#000000;
  --var-vitamins-ink:#000000;
  --var-collagen-ink:#000000;

  /* Deep tints for variant-tinted surfaces on white */
  --var-h2o-tint:#e6f5ff;
  --var-electrolytes-tint:#f4ffdd;
  --var-vitamins-tint:#ffece6;
  --var-collagen-tint:#ffe9f3;

  /* ---- Semantic aliases ---- */
  --surface-page:var(--n-0);
  --surface-sunken:var(--n-25);
  --surface-card:var(--n-0);
  --surface-inverse:var(--n-900);
  --surface-accent:var(--blue-500);

  --text-display:var(--n-900);
  --text-body:var(--n-700);
  --text-muted:var(--n-500);
  --text-inverse:var(--n-0);
  --text-accent:var(--blue-500);
  --text-on-accent:var(--n-0);

  --border-hairline:var(--n-100);
  --border-strong:var(--n-200);
  --border-rule:var(--n-900);

  --action-bg:var(--blue-500);
  --action-bg-hover:var(--blue-600);
  --action-bg-active:var(--blue-700);
  --action-ink:var(--n-0);
  --focus-ring:var(--blue-500);
}