:root {
  color-scheme: dark;
  --hue-slategrey: 210; --sat-slategrey: 12.6%; --light-slategrey: 50.2%;

  --accent-hue-step: 8; --accent-sat-step: 10%; --accent-light-step: 10%;
  --semantic-hue-step: 8; --semantic-sat-step: 10%; --semantic-light-step: 10%;

  --hue-bg: 234; --sat-bg: 33%; --light-bg: 3%;
  --hue-bg-muted: 255; --sat-bg-muted: 30%; --light-bg-muted: 11%;
  --hue-surface: 249; --sat-surface: 30%; --light-surface: 17%;
  --hue-surface-dark: 250; --sat-surface-dark: 30%; --light-surface-dark: 10%;

  --hue-text: 240; --sat-text: 17%; --light-text: 96%;
  --hue-text-subtle: 250; --sat-text-subtle: 20%; --light-text-subtle: 82%;
  --hue-text-faded: 260; --sat-text-faded: 15%; --light-text-faded: 65%;

  --hue-accent: 200; --sat-accent: 70%; --light-accent: 56%;
  --hue-accent-hover: calc(var(--hue-accent) - var(--accent-hue-step));
  --sat-accent-hover: calc(var(--sat-accent) + var(--accent-sat-step));
  --light-accent-hover: calc(var(--light-accent) + var(--accent-light-step));
  --hue-accent-muted: calc(var(--hue-accent) + var(--accent-hue-step));
  --sat-accent-muted: calc(var(--sat-accent) - var(--accent-sat-step));
  --light-accent-muted: calc(var(--light-accent) - var(--accent-light-step));

  --hue-secondary: 256; --sat-secondary: 34%; --light-secondary: 46%;

  --hue-link: 198; --sat-link: 68%; --light-link: 54%;
  --hue-link-hover: 198; --sat-link-hover: 82%; --light-link-hover: 67%;

  --hue-border: 253; --sat-border: 25%; --light-border: 28%;

  --hue-success: 168; --sat-success: 44%; --light-success: 44%;
  --hue-success-hover: calc(var(--hue-success) - var(--semantic-hue-step));
  --sat-success-hover: calc(var(--sat-success) + var(--semantic-sat-step));
  --light-success-hover: calc(var(--light-success) + var(--semantic-light-step));
  --hue-success-muted: calc(var(--hue-success) + var(--semantic-hue-step));
  --sat-success-muted: calc(var(--sat-success) - var(--semantic-sat-step));
  --light-success-muted: calc(var(--light-success) - var(--semantic-light-step));

  --hue-warning: 42; --sat-warning: 70%; --light-warning: 56%;
  --hue-warning-hover: calc(var(--hue-warning) - var(--semantic-hue-step));
  --sat-warning-hover: calc(var(--sat-warning) + var(--semantic-sat-step));
  --light-warning-hover: calc(var(--light-warning) + var(--semantic-light-step));
  --hue-warning-muted: calc(var(--hue-warning) + var(--semantic-hue-step));
  --sat-warning-muted: calc(var(--sat-warning) - var(--semantic-sat-step));
  --light-warning-muted: calc(var(--light-warning) - var(--semantic-light-step));

  --hue-error: 0; --sat-error: 50%; --light-error: 50%;
  --hue-error-hover: calc(var(--hue-error) - var(--semantic-hue-step));
  --sat-error-hover: calc(var(--sat-error) + var(--semantic-sat-step));
  --light-error-hover: calc(var(--light-error) + var(--semantic-light-step));
  --hue-error-muted: calc(var(--hue-error) + var(--semantic-hue-step));
  --sat-error-muted: calc(var(--sat-error) - var(--semantic-sat-step));
  --light-error-muted: calc(var(--light-error) - var(--semantic-light-step));
}