html {
  /* Base colors */
  --dandelion-100: #fff6cc;
  --dandelion-300: #ffe366;
  --dandelion-500: #ffd100;
  --dandelion-700: #997d00;
  --dandelion-900: #332a00;

  --blue-100: #b4c1ff;
  --blue-300: #8197ff;
  --blue-500: #002eff;
  --blue-700: #0025cc;
  --blue-900: #0020b3;

  --green-700: #8bcc00;

  --black: #080700;
  --white: #ffffff;

  --gray-100: #e6e6e6;
  --gray-300: #b3b3b3;
  --gray-500: #808080;
  --gray-700: #4d4d4d;
  --gray-800: #282828;
  --gray-900: #1a1a1a;

  /* Alias tokens */
  --primary-color: var(--blue-500);
  --primary-color-lighter: var(--blue-300);
  --primary-color-darker: var(--blue-700);
  --secondary-color: var(--dandelion-500);
  --secondary-color-lighter: var(--dandelion-300);
  --secondary-color-darker: var(--dandelion-700);
  --neutral-color: var(--gray-500);
  --neutral-color-lightest: var(--gray-100);
  --neutral-color-lighter: var(--gray-300);
  --neutral-color-darker: var(--gray-700);
  --neutral-color-darkest: var(--gray-900);
  --primary-icon-color: var(--dandelion-900);
  --primary-lines-color: var(--gray-100);
  --primary-text-inverse-color: var(--gray-100);

  /* Contrast colors */
  --contrast-color-light: var(--white);
  --contrast-color-dark: var(--dandelion-900);

  /* background-colors */
  --page-background: var(--white);
  --secondary-background: var(--gray-100);
  --footer-background: var(--neutral-color-lighter);

  /* typography */
  --text-color: var(--black);
  --primary-font-family: 'Open Sans', sans-serif;
  --secondary-font-family: 'Montserrat', sans-serif;
  --monospace-font-family:
    'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;

  /* controls */
  --switch-unselected-color: var(--neutral-color);
  --switch-selected-color: var(--green-700);

  --sidebar-tag-background-color: var(--secondary-color);
  --sidebar-tag-color: var(--text-color);

  /* markdown */
  --markdown-body: var(--text-color);
  --markdown-link-color: var(--primary-color);
  --markdown-octicon-link: var(--primary-color);
  --markdown-syntax-background-color: var(--neutral-color);
  --markdown-link-color: var(--primary-color);
  --markdown-blockquote-color: var(--secondary-color-darker);
}

html.dark {
  --primary-color: var(--blue-100);
  --primary-color-lighter: var(--blue-300);
  --primary-color-darker: var(--blue-100);
  --secondary-color: var(--dandelion-700);
  --secondary-color-lighter: var(--dandelion-900);
  --secondary-color-darker: var(--dandelion-500);
  --neutral-color: var(--gray-700);
  --neutral-color-lightest: var(--gray-900);
  --neutral-color-lighter: var(--gray-800);
  --neutral-color-darker: var(--gray-500);
  --neutral-color-darkest: var(--gray-300);
  
  --text-color: var(--white);
  --primary-icon-color: var(--dandelion-100);
  --primary-text-inverse-color: #2c3e50;

  /* Contrast colors */
  --contrast-color-light: #fff;
  --contrast-color-dark: #1d3557;

  /* background-colors */
  --page-background: var(--gray-700);
  --footer-background: var(--gray-900);
  /* typography */
  --text-color: white;

  /* controls */
  --switch-unselected-color: #808080;
}