:root{
--black-base:#121212;
--black-surface:#181818;
--black-surface-2:#1f1f1f;
--black-card:#252525;
--black-card-alt:#272727;
--green-brand:#1ed760;
--green-border:#1db954;
--white-base:#ffffff;
--white-emphasis:#fdfdfd;
--silver:#b3b3b3;
--silver-bright:#cbcbcb;
--red-negative:#f3727f;
--orange-warning:#ffa42b;
--blue-announcement:#539df5;
--gray-border:#4d4d4d;
--gray-border-light:#7c7c7c;
--gray-separator:#b3b3b3;
--white-surface:#eeeeee;

--surface-page:var(--black-base);
--surface-card:var(--black-surface);
--surface-card-alt:var(--black-surface-2);
--surface-elevated:var(--black-card);
--surface-elevated-alt:var(--black-card-alt);
--surface-light:var(--white-surface);

--text-primary:var(--white-base);
--text-emphasis:var(--white-emphasis);
--text-secondary:var(--silver);
--text-tertiary:var(--silver-bright);
--text-negative:var(--red-negative);
--text-warning:var(--orange-warning);
--text-announcement:var(--blue-announcement);
--text-on-accent:#04250f;
--text-on-light:#181818;

--accent:var(--green-brand);
--accent-border:var(--green-border);

--border-default:var(--gray-border);
--border-light:var(--gray-border-light);
--separator:var(--gray-separator);
}