:root{
  /* Brand — indigo family (from source: dashboard sidebar/CTA rgb(93,95,239), mobile primary/link rgb(76,77,220)) */
  --brand-50:#F2F2FE;
  --brand-100:#EDEDFC;
  --brand-300:#C8C8F4;
  --brand-500:#5D5FEF;
  --brand-600:#4C4DDC;
  --brand-700:#37455714;

  /* Ink / text */
  --ink-900:#151D48;
  --ink-800:#05004E;
  --ink-700:#101010;
  --ink-600:#222B45;
  --ink-500:#444A6D;

  /* Neutrals / gray text & surfaces */
  --gray-600:#737991;
  --gray-500:#939393;
  --gray-400:#96A5B8;
  --gray-300:#C8C9CB;
  --gray-200:#ECECEC;
  --gray-150:#F8F9FA;
  --gray-100:#F9FAFB;
  --gray-50:#FAFBFC;
  --white:#FFFFFF;

  /* Semantic status */
  --success-500:#00E096;
  --success-600:#0BB783;
  --success-mute:#4AB58E;
  --info-500:#0095FF;
  --warning-500:#FFA800;
  --danger-500:#B22234;
  --danger-mute:#E74C3C;
  --star-500:#FFD33C;

  /* Aliases used across components */
  --text-heading:var(--ink-800);
  --text-body:var(--ink-700);
  --text-muted:var(--gray-600);
  --text-subtle:var(--gray-500);
  --text-on-brand:var(--white);
  --link:var(--brand-600);

  --surface-page:var(--gray-50);
  --surface-card:var(--white);
  --surface-tint:rgba(200,200,244,0.15);
  --border-subtle:var(--gray-200);
  --border-faint:var(--gray-150);
}