:root{
  --pink-50:#fdeef4;
  --pink-100:#fcdcea;
  --pink-300:#ff9ccb;
  --pink-500:#ff5fa8;
  --pink-600:#f23f92;
  --red-500:#ef1f52;
  --red-600:#d4123f;
  --cream-50:#faf6ef;
  --cream-100:#f4ede1;
  --cream-200:#ece1d1;
  --ink-900:#3a3430;
  --ink-600:#6b6259;
  --ink-400:#9c9188;
  --holo-purple:#9b7fe0;
  --holo-teal:#4fd1c5;
  --holo-gold:#f4c95d;
  --white:#ffffff;

  --color-bg-page:var(--cream-50);
  --color-bg-panel:var(--white);
  --color-bg-pattern:var(--pink-50);
  --color-brand-primary:var(--pink-500);
  --color-brand-primary-hover:var(--pink-600);
  --color-brand-outline:var(--red-500);
  --color-accent-purple:var(--holo-purple);
  --color-accent-teal:var(--holo-teal);
  --color-accent-gold:var(--holo-gold);
  --color-text-heading:var(--pink-600);
  --color-text-body:var(--ink-900);
  --color-text-muted:var(--ink-600);
  --color-text-faint:var(--ink-400);
  --color-text-on-brand:var(--white);
  --color-border-soft:var(--cream-200);
  --color-border-brand:var(--pink-300);
  --color-badge-bg:var(--pink-100);
}