:root,
:host {
  // colors
  --van-doc-black: #000;
  --van-doc-white: #fff;
  --van-doc-gray-1: #f7f8fa;
  --van-doc-gray-2: #f2f3f5;
  --van-doc-gray-3: #ebedf0;
  --van-doc-gray-4: #dcdee0;
  --van-doc-gray-5: #c8c9cc;
  --van-doc-gray-6: #969799;
  --van-doc-gray-7: #646566;
  --van-doc-gray-8: #323233;
  --van-doc-blue: #1989fa;
  --van-doc-green: #07c160;
  --van-doc-purple: #8e69d3;

  // sizes
  --van-doc-padding: 32px;
  --van-doc-row-max-width: 1680px;
  --van-doc-nav-width: 220px;
  --van-doc-border-radius: 20px;
  --van-doc-simulator-width: 360px;
  --van-doc-simulator-height: 620px;
  --van-doc-header-top-height: 64px;

  // fonts
  --van-doc-code-font-family: 'Menlo', 'Source Code Pro', 'Monaco',
    'Inconsolata', monospace;
}

.van-doc-theme-light {
  // text
  --van-doc-text-color-1: var(--van-doc-black);
  --van-doc-text-color-2: var(--van-doc-gray-8);
  --van-doc-text-color-3: #34495e;
  --van-doc-text-color-4: var(--van-doc-gray-6);
  --van-doc-link-color: var(--van-doc-blue);

  // background
  --van-doc-background: #eff2f5;
  --van-doc-background-2: var(--van-doc-white);
  --van-doc-background-3: var(--van-doc-white);
  --van-doc-header-background: #011f3c;
  --van-doc-border-color: var(--van-doc-gray-2);

  // code
  --van-doc-code-color: #58727e;
  --van-doc-code-comment-color: var(--van-doc-gray-6);
  --van-doc-code-background: var(--van-doc-gray-1);

  // blockquote
  --van-doc-blockquote-color: #2f85da;
  --van-doc-blockquote-background: #ecf9ff;
}

.van-doc-theme-dark {
  // text
  --van-doc-text-color-1: var(--van-doc-white);
  --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
  --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
  --van-doc-text-color-4: rgba(255, 255, 255, 0.6);
  --van-doc-link-color: #1bb5fe;

  // background
  --van-doc-background: #202124;
  --van-doc-background-2: rgba(255, 255, 255, 0.06);
  --van-doc-background-3: rgba(255, 255, 255, 0.1);
  --van-doc-header-background: rgba(1, 31, 60, 0.3);
  --van-doc-border-color: #3a3a3c;

  // code
  --van-doc-code-color: rgba(200, 200, 200, 0.85);
  --van-doc-code-comment-color: var(--van-doc-gray-7);
  --van-doc-code-background: rgba(0, 0, 0, 0.24);

  // blockquote
  --van-doc-blockquote-color: #bae6fd;
  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
}