:root{
--black:#1D1D1B;
--white:#FFFFFF;
--yellow:#F4FF59;
--pink:#F10D4C;
--grey-90:oklch(from var(--black) calc(l + 0.08) c h);
--grey-70:oklch(from var(--black) calc(l + 0.35) calc(c*0.4) h);
--grey-40:oklch(from var(--black) calc(l + 0.62) calc(c*0.2) h);
--grey-15:oklch(from var(--black) calc(l + 0.92) calc(c*0.08) h);
--yellow-dim:oklch(from var(--yellow) calc(l - 0.06) calc(c*0.85) h);
--pink-dim:oklch(from var(--pink) calc(l - 0.08) c h);
--pink-tint:oklch(from var(--pink) calc(l + 0.4) calc(c*0.3) h);

--surface-light:var(--white);
--surface-dark:var(--black);
--surface-dark-raised:var(--grey-90);
--surface-card-light:var(--white);
--surface-card-dark:var(--grey-90);

--text-on-light:var(--black);
--text-on-light-muted:var(--grey-70);
--text-on-dark:var(--white);
--text-on-dark-muted:var(--grey-40);

--accent-primary:var(--yellow);
--accent-primary-hover:var(--yellow-dim);
--accent-primary-ink:var(--black);
--accent-secondary:var(--pink);
--accent-secondary-hover:var(--pink-dim);
--accent-secondary-ink:var(--white);

--border-light:oklch(from var(--black) l c h / 0.12);
--border-dark:oklch(from var(--white) l c h / 0.16);

--focus-ring:var(--pink);
}