:root{
--color-light-blue:#75cced;
--color-bright-blue:#00acee;
--color-medium-grey:#5c6366;
--color-dark-grey:#3d3e40;
--color-white:#ffffff;
--color-bright-blue-hover:color-mix(in oklch,var(--color-bright-blue) 85%,black);
--color-bright-blue-active:color-mix(in oklch,var(--color-bright-blue) 72%,black);
--color-bright-blue-tint:color-mix(in oklch,var(--color-bright-blue) 12%,white);
--color-light-blue-tint:color-mix(in oklch,var(--color-light-blue) 15%,white);
--color-dark-grey-hover:color-mix(in oklch,var(--color-dark-grey) 88%,white);
--color-border:color-mix(in oklch,var(--color-medium-grey) 22%,white);
--color-border-strong:color-mix(in oklch,var(--color-medium-grey) 45%,white);
--text-headline:var(--color-light-blue);
--text-headline-on-dark:var(--color-light-blue);
--text-body:var(--color-medium-grey);
--text-body-on-dark:color-mix(in oklch,var(--color-white) 82%,var(--color-medium-grey));
--text-accent:var(--color-bright-blue);
--surface-page:var(--color-white);
--surface-dark:var(--color-dark-grey);
--surface-card:var(--color-white);
--surface-muted:color-mix(in oklch,var(--color-medium-grey) 6%,white);
--focus-ring:var(--color-bright-blue);
}