@mixin ayu-dark {
  color-scheme: dark;

  --bg:         #0F1419; // base00  default background
  --bg-alt:     #131721; // base01  raised background
  --bg-sel:     #272D38; // base02  selection background
  --grey:       #3E4B59; // base03  comments, invisibles
  --fg-dim:     #BFBDB6; // base04  muted foreground
  --fg:         #E6E1CF; // base05  default foreground
  --fg-alt:     #E6E1CF; // base06
  --fg-bright:  #F3F4F5; // base07  brightest foreground

  --red:        #F07178; // base08
  --orange:     #FF8F40; // base09
  --yellow:     #FFB454; // base0A
  --green:      #B8CC52; // base0B
  --cyan:       #95E6CB; // base0C
  --blue:       #59C2FF; // base0D
  --purple:     #D2A6FF; // base0E
  --brown:      #E6B673; // base0F
}

@mixin ayu-light {
  color-scheme: light;

  --bg:         #FAFAFA; // base00
  --bg-alt:     #F3F4F5; // base01
  --bg-sel:     #F8F9FA; // base02
  --grey:       #ABB0B6; // base03
  --fg-dim:     #828C99; // base04
  --fg:         #5C6773; // base05
  --fg-alt:     #242936; // base06
  --fg-bright:  #1A1F29; // base07

  --red:        #F07178; // base08
  --orange:     #FA8D3E; // base09
  --yellow:     #F2AE49; // base0A
  --green:      #86B300; // base0B
  --cyan:       #4CBF99; // base0C
  --blue:       #36A3D9; // base0D
  --purple:     #A37ACC; // base0E
  --brown:      #E6BA7E; // base0F
}

:root { @include ayu-light; }
@media (prefers-color-scheme: dark) {
  :root { @include ayu-dark; }
}

:root[data-theme="dark"]  { @include ayu-dark; }
:root[data-theme="light"] { @include ayu-light; }