:root{
/* base palette */
--yellow:#ffd02f;
--yellow-deep:#fcb900;
--yellow-light:#fff4c4;
--yellow-dark:#746019;
--blue:#4262ff;
--blue-450:#5b76fe;
--blue-pressed:#2a41b6;
--coral:#ff9999;
--coral-light:#ffc6c6;
--coral-dark:#600000;
--rose:#ffd8f4;
--rose-light:#fde0f0;
--pink:#fde0f0;
--teal:#0fbcb0;
--teal-light:#c3faf5;
--moss-dark:#187574;
--orange-light:#ffe6cd;
--red:#fbd4d4;
--red-dark:#e3c5c5;
--green:#00b473;
--black:#1c1c1e;
--charcoal:#2c2c34;
--slate:#555a6a;
--steel:#6b6f7e;
--stone:#8e91a0;
--gray:#a5a8b5;
--white:#ffffff;
--ink-deep:#050038;
--gray-50:#f7f8fa;
--gray-25:#fafbfc;
--lavender-50:#f5f3ff;
--line-100:#e0e2e8;
--line-50:#eef0f3;
--line-200:#c7cad5;

/* semantic aliases */
--color-primary:var(--black);
--color-on-primary:var(--white);
--color-brand-yellow:var(--yellow);
--color-brand-blue:var(--blue);
--color-brand-coral:var(--coral);
--color-brand-teal:var(--teal);
--color-brand-rose:var(--rose);

--surface-canvas:var(--white);
--surface-page:var(--gray-50);
--surface-soft:var(--gray-25);
--surface-yellow:#fff8e0;
--surface-featured:var(--lavender-50);

--border-default:var(--line-100);
--border-soft:var(--line-50);
--border-strong:var(--line-200);

--text-heading:var(--black);
--text-body:var(--charcoal);
--text-secondary:var(--slate);
--text-tertiary:var(--steel);
--text-muted:var(--gray);
--text-on-dark:var(--white);
--text-on-dark-muted:var(--gray);

--success:var(--green);
--footer-bg:var(--black);
}