:root{
--duol-red-700:#9c1d21;
--duol-red-600:#C32429;
--duol-red-500:#d54348;
--duol-red-100:#f7dcdd;
--duol-red-50:#fbeeee;
--grey-900:#2b2e32;
--grey-800:#474C52;
--grey-700:#5B626C;
--grey-500:#868c94;
--grey-300:#c7cace;
--grey-100:#E6E7E9;
--grey-50:#f4f4f5;
--white:#FFFFFF;
--text-primary:var(--grey-900);
--text-secondary:var(--grey-700);
--text-on-red:var(--white);
--text-inverse:var(--white);
--surface-page:var(--white);
--surface-muted:var(--grey-50);
--surface-alt:var(--grey-100);
--surface-dark:var(--grey-800);
--surface-card:var(--white);
--border-subtle:var(--grey-100);
--border-default:var(--grey-300);
--surface-app-dark:#141A22;
--surface-app-card:#2C323C;
--surface-app-inset:#20262F;
--text-on-dark-muted:#A7AFB8;
--border-on-dark:#84888C;
--border-on-dark-hover:rgba(255,255,255,0.85);
--brand-accent:var(--duol-red-600);
--brand-accent-hover:var(--duol-red-700);
--brand-accent-tint:var(--duol-red-50);
--focus-ring:var(--duol-red-500);
--state-success:#3f8a54;
--state-warning:#c88a1a;
--state-danger:var(--duol-red-600);
}