@primary: #86a873;

:root {
  // basic
  --black: #000;
  --black-1: #1c1c1c;
  --black-2: #1e1e1e;
  --black-3: #2e2e2e;
  --black-4: #333;
  --black-5: #3e3e3e;
  --gray: #4a4a4a;
  --gray-1: #666;
  --gray-2: #999;
  --gray-3: #afafaf;
  --white-3: #cecece;
  --white-2: #dadada;
  --white-1: #fbfbfb;
  --white: white;
  // common
  --primary: #86a873;
  --primary-hover: lighten(@primary, 5%);
  // spec
  --page-background: var(--white-1);
  --text-title: var(--white);
  --text-subtitle: var(--gray-1);
  --text-footer: var(--gray-2);
  --text-footer-hover: var(--gray-3);
  --article-block-border: lighten(@primary, 5%);
  --article-block-text: var(--gray-1);
  --article-block-text--prefix: var(--gray-2);
  --article-block-hover: var(--gray-2);
  --article-block-footer: var(--gray-1);
  --article-title: var(--black-5);
  --article-meta: var(--gray-2);
  --article-text: var(--gray-1);
  --article-link-hover: var(--black);
  --article-border: lighten(@primary, 5%);
  --article-title-border: #e1e3e2;
  --article-code-bg: #f5f4f6;
  --article-code-border: #eff1f0;
  --article-code-scroll: var(--gray-1);
  --article-code-text: var(--black-4);
  --article-code-shadow: rgba(0, 0, 0, 0.04);
  --blockquote-bg: #f5f4f6;
  --blockquote-secondary-bg: #ecedec;
  --blockquote-code-shadow: rgba(0, 0, 0, 0.02);
  --blockquote-border: #f2f3f1;
  --blockquote-secondary-border: #e7e9e8;
  --paginator-front: var(--primary);
  --paginator-back: var(--gray-2);
  --notfound-text: var(--gray-1);
}

.dark {
  --primary-hover: darken(@primary, 5%);
  // spec
  --page-background: var(--black-1);
  --text-title: var(--white-1);
  --text-subtitle: var(--gray-3);
  --text-footer: var(--gray-2);
  --text-footer-hover: var(--gray-3);
  --article-block-border: darken(@primary, 5%);
  --article-block-text: var(--gray-3);
  --article-block-text-prefix: var(--gray-1);
  --article-block-hover: var(--white-3);
  --article-block-footer: var(--gray-2);
  --article-title: var(--white-3);
  --article-meta: var(--gray-2);
  --article-text: var(--gray-3);
  --article-link-hover: var(--white-3);
  --article-border: darken(@primary, 5%);
  --article-title-border: var(--black-5);
  --article-code-bg: #222;
  --article-code-text: var(--white-3);
  --article-code-border: #192018;
  --blockquote-bg: #222;
  --blockquote-secondary-bg: #282828;
  --paginator-front: var(--primary);
  --paginator-back: var(--gray-2);
  --notfound-text: var(--gray-1);
}