/* Color custom property definitions */

:root
{
  color-scheme: light dark;

  --primary: black;
  --inverse: white;
  --main: hsl(0 0 96%);
  --text: hsl(0 0 7.5%);
  --secondary: hsl(0 0 40%);
  --accent: hsl(12 100% 45%);
  --border: hsl(0 0 75%);
  --control: hsl(0 0 30%);
  --control-primary: hsl(224 80% 45%);
  --notice: hsl(204 80% 45%);
  --error: hsl(0 80% 35%);
}
@media (prefers-color-scheme: dark)
{
  :root
  {
    --primary: white;
    --inverse: black;
    --main: hsl(0 0 8%);
    --text: hsl(0 0 94%);
    --secondary: hsl(0 0 60%);
    --accent: hsl(18 100% 50%);
    --border: hsl(0 0 25%);
    --control: hsl(0 0 70%);
    --control-primary: hsl(224 100% 60%);
    --notice: hsl(204 100% 45%);
    --error: hsl(0 100% 65%);
  }
}
:root
{
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 16%);
  --control-active: color-mix(in oklab, var(--control), black 16%);
  --control-primary-active: color-mix(in oklab, var(--control-primary), black 16%);
  --error-background: color-mix(in srgb-linear, var(--error) 12%, transparent);
}