:root {
  --color-primary: #0090d3;
  --color-primary-light-1: rgba(0, 144, 211, 0.1);
  --color-primary-light-2: rgba(0, 144, 211, 0.2);
  --color-primary-light-3: rgba(0, 144, 211, 0.3);
  --color-primary-light-4: rgba(0, 144, 211, 0.4);
  --color-primary-light-5: rgba(0, 144, 211, 0.5);
  --color-primary-light-6: rgba(0, 144, 211, 0.6);
  --color-primary-light-7: rgba(0, 144, 211, 0.7);
  --color-primary-light-8: rgba(0, 144, 211, 0.8);
  --color-primary-light-9: rgba(0, 144, 211, 0.9);

  --color-background-1: #ececec;
  --color-background-2: #f5f5f5;
  --color-background-3: #fcfcfc;

  --color-text-primary: #4d4d4d;
  --color-text-regular: #5f5f5f;
  --color-text-secondary: #838383;

  /* Highlight.js */
  --h-comment: #a0a1a7;
  --h-keyword: #a626a4;
  --h-section: #e45649;
  --h-literal: #0184bb;
  --h-string: #50a14f;
  --h-class: #c18401;
  --h-variable: #986801;
  --h-symbol: #4078f2;
}

[theme='dark'] {
  --color-primary: #0090d3;
  --color-primary-light-1: rgba(0, 144, 211, 0.1);
  --color-primary-light-2: rgba(0, 144, 211, 0.2);
  --color-primary-light-3: rgba(0, 144, 211, 0.3);
  --color-primary-light-4: rgba(0, 144, 211, 0.4);
  --color-primary-light-5: rgba(0, 144, 211, 0.5);
  --color-primary-light-6: rgba(0, 144, 211, 0.6);
  --color-primary-light-7: rgba(0, 144, 211, 0.7);
  --color-primary-light-8: rgba(0, 144, 211, 0.8);
  --color-primary-light-9: rgba(0, 144, 211, 0.9);

  --color-background-1: #222831;
  --color-background-2: #393e46;
  --color-background-3: #4c525c;

  --color-text-primary: #ebebeb;
  --color-text-regular: #dedede;
  --color-text-secondary: #c7c7c7;

  /* Highlight.js */
  --h-comment: #5c6370;
  --h-keyword: #c678dd;
  --h-section: #e06c75;
  --h-literal: #56b6c2;
  --h-string: #98c379;
  --h-class: #e6c07b;
  --h-variable: #d19a66;
  --h-symbol: #61aeee;
}