:root {
  --gray-1:  light-dark(#fcfcfc, #111111);
  --gray-2:  light-dark(#f9f9f9, #191919);
  --gray-3:  light-dark(#f0f0f0, #222222);
  --gray-4:  light-dark(#e8e8e8, #2a2a2a);
  --gray-5:  light-dark(#e0e0e0, #313131);
  --gray-6:  light-dark(#d9d9d9, #3a3a3a);
  --gray-7:  light-dark(#cecece, #484848);
  --gray-8:  light-dark(#bbbbbb, #606060);
  --gray-9:  light-dark(#8d8d8d, #6e6e6e);
  --gray-10: light-dark(#838383, #7b7b7b);
  --gray-11: light-dark(#646464, #b4b4b4);
  --gray-12: light-dark(#202020, #eeeeee);

  --red-9:  light-dark(#e5484d, #e5484d);
  --red-11: light-dark(#ce2c31, #ff9592);

  --background:         var(--gray-1);
  --foreground:         var(--gray-12);
  --primary:            var(--gray-12);
  --primary-foreground: var(--gray-1);
  --muted:              var(--gray-3);
  --muted-foreground:   var(--gray-11);
  --destructive:        var(--red-11);
  --border:             var(--gray-6);
  --ring:               var(--gray-8);

  color-scheme: light dark;
}

*,
::before,
::after,
::backdrop,
::file-selector-button {
  border-color: var(--border);

  &:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 0.25rem;
    border-radius: 4px;
  }
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}