:root#light {
  --bg-0: #ffffff;
  --bg-1: #edf2fa;
  --bg-2: #dce4ef;
  --bg-3: #c7d1df;
  --bg-4: #b1bdcd;
  --bg-5: #9ba8b8;

  --border: var(--bg-5);

  --btn-active: #c7d1df7f;
  --btn: #b1bdcd7f;
  --btn-hover: #9ba8b87f;

  --text: #0a0b0d;
  --text-muted: #484d54;

  --accent: #185eaa;

  --link: var(--accent);
}

:root {
  --bg-0: #131314;
  --bg-1: #1e2123;
  --bg-2: #2b3033;
  --bg-3: #3b4246;
  --bg-4: #4d565b;
  --bg-5: #606b71;

  --border: var(--bg-5);

  --btn-active: #2b30337f;
  --btn: #3b42467f;
  --btn-hover: #4d565b7f;

  --text: #ffffff;
  --text-muted: #c9cbd5;

  --accent: #55aede;

  --link: var(--accent);
  --link-active: color-mix(in srgb, var(--accent), var(--text) 25%);

  --article-width: min(800px, calc(100vw - 16px));
  --panel-width: max(calc((100vw - var(--article-width)) / 2 - 16px), 324px);

  --box-shadow-transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 600px) {
  :root {
    --panel-width: calc(100% - 16px);
  }
}