/* Custom property definitions for colors */

/* Greyscale values */

:root
{
  --black: black;
  --off-black: hsl(0 0 12%);

  --deep-down: hsl(from var(--deep) h s 16%);
  --deep: hsl(245 2 18%);
  --deep-up: hsl(from var(--deep) h s 22%);

  --dark-down: hsl(from var(--dark) h s 26%);
  --dark: hsl(from var(--deep) h s 38%);
  --dark-up: hsl(from var(--dark) h s 50%);

  --mid-down: hsl(from var(--mid) h s 58%);
  --mid: hsl(from var(--dark) h 4 66%);
  --mid-up: hsl(from var(--mid) h s 74%);

  --light-down: hsl(from var(--light) h s 84%);
  --light: hsl(from var(--dark) h 8 88%);
  --light-up: hsl(from var(--light) h s 92%);

  --off-white: hsl(from var(--dark) h 12 96%);
  --white: white;
}

/* Light color scheme */

:root
{
  color-scheme: light dark;

  --primary: var(--black);
  --inverse: var(--white);

  --main: var(--off-white);

  --text: var(--off-black);
  --text-secondary: var(--dark);
  --text-tertiary: var(--mid);

  --border: var(--mid-up);
  --border-secondary: var(--light-up);

  --listing-background-hover: var(--light-up);
  --listing-background-active: var(--light);

  --control: var(--dark);
  --control-hover: var(--dark-up);
  --control-active: var(--dark-down);

  --control-primary: hsl(224 80% 40%);
  --control-primary-hover: hsl(from var(--control-primary) h s 48%);
  --control-primary-active: hsl(from var(--control-primary) h s 32%);

  --control-destructive: hsl(0 90% 40%);
  --control-destructive-hover: hsl(from var(--control-destructive) h s 48%);
  --control-destructive-active: hsl(from var(--control-destructive) h s 32%);

  --toggle-background: var(--light-up);
  --toggle-border: var(--mid-up);
  --toggle-background-active: var(--light);

  --toggle-border-active: var(--control-active);
  --toggle-background-checked: var(--inverse);
  --toggle-border-checked: var(--control);

  --notice: hsl(204 80% 46%);
  --error: hsl(0 80% 32%);
  --error-background: hsl(from var(--error) h s 96%);
}

/* Dark color scheme */

@media (prefers-color-scheme: dark)
{
  :root
  {
    --primary: var(--white);
    --inverse: var(--black);

    --main: var(--off-black);

    --text: var(--off-white);
    --text-secondary: var(--mid);
    --text-tertiary: var(--dark);

    --border: var(--dark-down);
    --border-secondary: var(--deep);

    --listing-background-hover: var(--deep);
    --listing-background-active: var(--deep-down);

    --control: var(--mid);
    --control-hover: var(--mid-up);
    --control-active: var(--mid-down);

    --control-primary: hsl(224 100% 52%);
    --control-primary-hover: hsl(from var(--control-primary) h s 56%);
    --control-primary-active: hsl(from var(--control-primary) h s 46%);

    --control-destructive: hsl(0 100% 56%);
    --control-destructive-hover: hsl(from var(--control-destructive) h s 64%);
    --control-destructive-active: hsl(from var(--control-destructive) h s 48%);

    --toggle-background: var(--deep);
    --toggle-border: var(--dark-down);
    --toggle-background-active: var(--deep-down);

    --notice: hsl(204 100% 52%);
    --error: hsl(0 100% 68%);
    --error-background: hsl(from var(--error) h s 8%);
  }
}

/* Main overlay, dialog backdrop, and shadow colors */

:root
{
  --main-overlay: color-mix(in srgb-linear, var(--main) 75%, transparent);
  --backdrop: color-mix(in srgb-linear, var(--off-black) 50%, transparent);
  --shadow: color-mix(in srgb-linear, var(--primary) 25%, transparent);
}