:root {
  /* typography */
  --mobile-font-size: 0.9rem;
  --mobile-line-height: 1.6;
  --desktop-font-size: 1rem;
  --desktop-line-height: 1.75;
  /* ----- light ----- */
  /* post */
  --light-body-font-color: #444;
  --light-body-background: #f9f9f9;
  --light-code-background: #e6e6e6;
  --light-pre-background: #272727;
  --light-pre-font-color: #f3f3f3;
  /* index specific */
  --index-border-color: #444;
  --light-index-body-background: #eeeeee;
  --light-index-box-shadow: #c4c4c4;
  /* card specific */
  --light-card-bg: #f5f5f5;
  --light-card-shadow: #c4c4c4;
  /* ----- dark ----- */
  /* post */
  --dark-body-font-color: #bfbcba;
  --dark-body-background: #1a1816;
  --dark-link: #9e9eff;
  --dark-link-visited: #d0adf0;
  --dark-code-background: #272727;
  /* index specific */
  --dark-index-html-background: #232120;
  --dark-index-box-shadow: #11100f;
  /* card specific */
  --dark-card-bg: #232120;
  --dark-card-shadow: #11100f;
  /* ----- universal ----- */
  /* code block */
  --code-title-border-color: #555555;
  --blockquote-left-bar-color: #888;
  /* ----- active theme (resolved per combination below) ----- */
  --active-body-color: var(--light-body-font-color);
  --active-body-bg: var(--light-body-background);
  --active-link: #1244c8;
  --active-link-visited: #612d96;
  --active-code-bg: var(--light-code-background);
  --active-img-filter: none;
  --active-blockquote-bg: var(--light-code-background);
  /* index active */
  --active-index-html-bg: var(--light-body-background);
  --active-index-body-bg: var(--light-index-body-background);
  --active-index-box-shadow: var(--light-index-box-shadow);
  /* card active */
  --active-card-bg: var(--light-card-bg);
  --active-card-shadow: var(--light-card-shadow);
}
/* system dark */
@media (prefers-color-scheme: dark) {
  :root {
    --active-body-color: var(--dark-body-font-color);
    --active-body-bg: var(--dark-body-background);
    --active-link: var(--dark-link);
    --active-link-visited: var(--dark-link-visited);
    --active-code-bg: var(--dark-code-background);
    --active-img-filter: brightness(.85) contrast(1.1);
    --active-blockquote-bg: var(--dark-code-background);
    --active-index-html-bg: var(--dark-index-html-background);
    --active-index-body-bg: var(--dark-body-background);
    --active-index-box-shadow: var(--dark-index-box-shadow);
    --active-card-bg: var(--dark-card-bg);
    --active-card-shadow: var(--dark-card-shadow);
  }
}
/* forced dark (any system pref) */
:root[data-theme="dark"] {
  --active-body-color: var(--dark-body-font-color);
  --active-body-bg: var(--dark-body-background);
  --active-link: var(--dark-link);
  --active-link-visited: var(--dark-link-visited);
  --active-code-bg: var(--dark-code-background);
  --active-img-filter: brightness(.85) contrast(1.1);
  --active-blockquote-bg: var(--dark-code-background);
  --active-index-html-bg: var(--dark-index-html-background);
  --active-index-body-bg: var(--dark-body-background);
  --active-index-box-shadow: var(--dark-index-box-shadow);
  --active-card-bg: var(--dark-card-bg);
  --active-card-shadow: var(--dark-card-shadow);
}
/* forced light when system is dark */
@media (prefers-color-scheme: dark) {
  :root[data-theme="light"] {
    --active-body-color: var(--light-body-font-color);
    --active-body-bg: var(--light-body-background);
    --active-link: #1244c8;
    --active-link-visited: #612d96;
    --active-img-filter: none;
    --active-blockquote-bg: var(--light-code-background);
    --active-index-html-bg: var(--light-body-background);
    --active-index-body-bg: var(--light-index-body-background);
    --active-index-box-shadow: var(--light-index-box-shadow);
    --active-card-bg: var(--light-card-bg);
    --active-card-shadow: var(--light-card-shadow);
  }
}
/* index page */
html.index body {
  margin: 60px auto;
  max-width: 32rem;
  line-height: 1.6;
  padding: 0 20px 20px 20px;
}
html.index ul {
  padding-left: 1.75rem;
}
/* index desktop viewports */
@media (min-width: 600px) {
  html.index { background: var(--active-index-html-bg); }
  html.index body {
    border: 4px dashed var(--index-border-color);
    background: var(--active-index-body-bg);
    box-shadow: 12px 12px var(--active-index-box-shadow);
    padding-top: 25px; /* restore margin above title */
  }
}