:root{
  /* base palette — extracted from penti.ai */
  --white:#ffffff;
  --black:#070707;
  --gray-50:#fafafc;
  --gray-300:#cccccc;
  --gray-600:#666666;
  --purple-500:#6d5aff;
  --green-500:#00e388;
  --teal-500:#00829b;

  /* semantic surfaces */
  --surface-page:var(--white);
  --surface-subtle:var(--gray-50);
  --surface-inverse:var(--black);
  --surface-card:var(--white);
  --surface-card-inverse:#111111;

  /* semantic text */
  --text-primary:var(--black);
  --text-secondary:var(--gray-600);
  --text-on-inverse:var(--white);
  --text-on-inverse-secondary:var(--gray-300);
  --text-link:var(--purple-500);

  /* semantic brand */
  --brand-primary:var(--purple-500);
  --brand-accent:var(--green-500);
  --brand-info:var(--teal-500);

  /* borders */
  --border-default:var(--gray-300);
  --border-strong:var(--black);
  --border-inverse:var(--gray-600);

  /* focus / interactive */
  --focus-ring:var(--purple-500);
}