:root{
  /* ── Levels — the neutral ramp. Named "levels", not "gray": low numbers are surfaces, high numbers are ink. */
  --levels-25:#fafafa; --levels-50:#f5f5f7; --levels-100:#f0f0f1; --levels-200:#ececed;
  --levels-300:#cecfd2; --levels-400:#94969c; --levels-500:#85888e; --levels-600:#61646c;
  --levels-700:#333741; --levels-800:#1f242f; --levels-900:#161b26; --levels-950:#0c111d;
  --white:#ffffff; --black:#000000;

  /* ── Brand — hot magenta-red. 500 is THE brand colour. */
  --brand-15:#fff3f5; --brand-25:#ffeff1; --brand-50:#ffe0e6; --brand-100:#ffc6d3;
  --brand-200:#ff97ae; --brand-300:#ff5d83; --brand-400:#ff245e; --brand-500:#ff004d;
  --brand-600:#d70041; --brand-700:#b4003f; --brand-800:#99023c; --brand-950:#430318;

  /* ── Accent — violet, used sparingly in gradients and AI surfaces. */
  --accent-200:#e1d4ff; --accent-400:#b485ff; --accent-500:#9747ff;

  /* ── Label / layer alphas (Apple-HIG style translucent ink over light layers). */
  --label-light-primary:#1d1d1f;
  --label-light-secondary:rgba(60,60,67,.7);
  --label-light-tertiary:rgba(60,60,67,.4);
  --label-light-quaternary:rgba(60,60,67,.18);
  --label-dark-primary:#ffffff;
  --layers-light-primary:#ffffff;

  /* ── Semantic states */
  --error-25:#fffbfa; --error-50:#fef3f2; --error-100:#fee4e2; --error-200:#fecdca;
  --error-300:#fda29b; --error-400:#f97066; --error-500:#f04438; --error-600:#d92d20; --error-700:#b42318;
  --success-50:#f1fcf3; --success-100:#defae4; --success-200:#bef4cb; --success-300:#8beaa2;
  --success-500:#30d158; --success-600:#1d9c3d; --success-700:#1a7b32;
  --warning-50:#fffbeb; --warning-100:#fef3c7; --warning-200:#fde68a; --warning-500:#f59e0b;

  /* ── Graph palette — categorical series colours for charts and legends. */
  --graph-red:#e63946; --graph-coral:#ff6b6b; --graph-orange:#fa5a15; --graph-peach:#fdba74;
  --graph-amber:#f59e0b; --graph-yellow:#facc15; --graph-beige:#ffefca; --graph-lime:#84cc16;
  --graph-olive:#6b8e23; --graph-green:#14b8a6; --graph-mint:#6ee7b7; --graph-teal:#0f766e;
  --graph-cyan:#15facc; --graph-sky:#38bdf8; --graph-blue:#007ed1; --graph-navy:#1d3557;
  --graph-indigo:#4f46e5; --graph-purple:#6860bb; --graph-lavender:#c4b5fd; --graph-violet:#933a90;
  --graph-magenta:#d946ef; --graph-rose:#f472b6; --graph-pink:#ffe6ff; --graph-brown:#4a2f00;
  --graph-slate:#64748b; --graph-gray:#2f4858;

  /* ── ObraFlow logo reds (mark only — do NOT use as UI colours; the UI brand is --brand-500). */
  --logo-red:#e9252f; --logo-red-dark:#cb1925;
}