:root{
--black:#000000;
--white:#ffffff;
--orange:#f6811f;
--orange-dark:oklch(from #f6811f calc(l - 0.08) c h);
--orange-light:oklch(from #f6811f calc(l + 0.08) c h);
--orange-10:oklch(from #f6811f l c h / 0.1);
--orange-20:oklch(from #f6811f l c h / 0.2);
--orange-60:oklch(from #f6811f l c h / 0.6);
--gray-1:oklch(0.97 0 0);
--gray-2:oklch(0.90 0 0);
--gray-3:oklch(0.72 0 0);
--gray-4:oklch(0.45 0 0);
--gray-5:oklch(0.20 0 0);
--surface-page:var(--white);
--surface-inverse:var(--black);
--surface-card:var(--white);
--surface-muted:var(--gray-1);
--text-primary:var(--black);
--text-inverse:var(--white);
--text-muted:var(--gray-4);
--text-accent:var(--orange);
--border-default:var(--gray-2);
--border-strong:var(--black);
--accent:var(--orange);
--accent-hover:var(--orange-dark);
--accent-press:var(--orange-dark);
--link:var(--orange);
--link-hover:var(--orange-dark);
}