:root {
  // brand colors
  --c-brand: #3eaf7c;
  --c-brand-light: #4abf8a;

  // background colors
  --c-bg: #ffffff;
  --c-bg-light: #f3f4f5;
  --c-bg-lighter: #eeeeee;
  --c-bg-navbar: var(--c-bg);
  --c-bg-sidebar: var(--c-bg);
  --c-bg-arrow: #cccccc;

  // text colors
  --c-text: #2c3e50;
  --c-text-accent: var(--c-brand);
  --c-text-light: #3a5169;
  --c-text-lighter: #4e6e8e;
  --c-text-lightest: #6a8bad;
  --c-text-quote: #999999;

  // border colors
  --c-border: #eaecef;
  --c-border-dark: #dfe2e5;

  // custom container colors
  --c-tip: #42b983;
  --c-tip-bg: var(--c-bg-light);
  --c-tip-title: var(--c-text);
  --c-tip-text: var(--c-text);
  --c-tip-text-accent: var(--c-text-accent);
  --c-warning: #e7c000;
  --c-warning-bg: #fffae3;
  --c-warning-title: #ad9000;
  --c-warning-text: #746000;
  --c-warning-text-accent: var(--c-text);
  --c-danger: #cc0000;
  --c-danger-bg: #ffe0e0;
  --c-danger-title: #990000;
  --c-danger-text: #660000;
  --c-danger-text-accent: var(--c-text);
  --c-details-bg: #eeeeee;

  // badge component colors
  --c-badge-tip: var(--c-tip);
  --c-badge-warning: var(--c-warning);
  --c-badge-danger: var(--c-danger);

  // transition vars
  --t-color: 0.3s ease;
  --t-transform: 0.3s ease;

  // code blocks vars
  --code-bg-color: #282c34;
  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
  --code-ln-color: #9e9e9e;
  --code-ln-wrapper-width: 3.5rem;

  // font vars
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

html.dark {
  // brand colors
  --c-brand: #3aa675;
  --c-brand-light: #349469;

  // background colors
  --c-bg: #22272e;
  --c-bg-light: #2b313a;
  --c-bg-lighter: #262c34;

  // text colors
  --c-text: #adbac7;
  --c-text-light: #96a7b7;
  --c-text-lighter: #8b9eb0;
  --c-text-lightest: #8094a8;

  // border colors
  --c-border: #3e4c5a;
  --c-border-dark: #34404c;

  // custom container colors
  --c-tip: #318a62;
  --c-warning: #ceab00;
  --c-warning-bg: #7e755b;
  --c-warning-title: #ceac03;
  --c-warning-text: #362e00;
  --c-danger: #940000;
  --c-danger-bg: #806161;
  --c-danger-title: #610000;
  --c-danger-text: #3a0000;
  --c-details-bg: #323843;

  // code blocks vars
  --code-hl-bg-color: #363b46;
}
