/*
  Based on color scheme in https://docs.sublimetext.io
  but with slightly tweaked contrast progression,
  and a more contrasty shade of orrange.
*/

:root {
  /* light */
  --background-1: hsl(0 0% 100%); /* white */
  --background-2: hsl(0 0% 94%);  /* ..    */
  --background-3: hsl(0 0% 90%);  /* ..    */
  --background-4: hsl(0 0% 87%);  /* ..    */
  --background-5: hsl(0 0% 82%);  /* grey  */

  --highlight: hsl(0 0% 87% / 0.3); /* inline code */

  --foreground-1: hsl(240 5% 29%); /* black */
  --foreground-2: hsl(240 4% 40%); /* ..    */
  --foreground-3: hsl(240 3% 51%); /* ..    */
  --foreground-4: hsl(240 3% 60%); /* grey  */
  --white: hsl(0 0% 100%);

  --red-1: hsl(7 98% 56%);
  --red-2: hsl(7 92% 54%);
  --orange-1: hsl(32 94% 55%);
  --orange-2: hsl(32 92% 49%);
  --orange-3: hsl(32 90% 44%);
  --blue-1: hsl(198 97% 54%);
  --blue-2: hsl(198 88% 51%);
  --blue-3: hsl(198 84% 45%);
  --green-1: hsl(80 70% 49%);
  --green-2: hsl(80 67% 47%);
  --green-3: hsl(80 65% 42%);
}

:root[data-theme='dark'] {
  /* dark */
  --background-1: hsl(214 17% 16%);
  --background-2: hsl(214 17% 18%);
  --background-3: hsl(211 14% 30%);
  --background-4: hsl(211 12% 35%);
  --background-5: hsl(210 11% 40%);

  --highlight: hsl(210 14% 46% / 0.16); /* inline code */

  --foreground-1: hsl(60 10% 84%);
  --foreground-2: hsl(60 5% 71%);
  --foreground-3: hsl(60 3% 59%);
  --foreground-4: hsl(60 2% 48%);

  --red-1: hsl(7 92% 54%);
  --red-2: hsl(7 98% 56%);
  --orange-1: hsl(32 92% 49%);
  --orange-2: hsl(32 94% 55%);
  --orange-3: hsl(32 97% 67%);
  --blue-1: hsl(198 88% 51%);
  --blue-2: hsl(198 97% 54%);
  --blue-3: hsl(198 98% 66%);
  --green-1: hsl(80 67% 47%);
  --green-2: hsl(80 70% 49%);
  --green-3: hsl(80 72% 58%);
}