/* Colours */
:root {
  --background: var(--gray-8);
  --shadow: var(--black);
}

body.dark {
  --background: var(--gray-8);
  --on-background: var(--gray-1);
  --surface: var(--gray-9);
  --on-surface: var(--gray-4);
  --on-surface-variant: var(--gray-6);
}

@media (prefers-color-scheme: light) {
  body.dark {
    --primary: #6750a4;
    --on-primary: #ffffff;
    --primary-container: #e9ddff;
    --on-primary-container: #22005d;
    --secondary: #625b71;
    --on-secondary: #ffffff;
    --secondary-container: var(--gray-4);
    --on-secondary-container: #1e192b;
    --tertiary: #7e5260;
    --on-tertiary: #ffffff;
    --tertiary-container: #ffd9e3;
    --on-tertiary-container: #31101d;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: var(--gray-0);
    --on-background: var(--gray-8);
    --surface: var(--gray-2);
    --on-surface: var(--gray-9);
    --surface-variant: var(--gray-1);
    --on-surface-variant: var(--gray-7);
    --outline: #7a757f;
    --outline-variant: #cac4cf;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: var(--gray-1);
    --inverse-on-surface: var(--gray-9);
    --inverse-primary: #cfbcff;
    --surface-dim: #ddd8dd;
    --surface-bright: #fdf8fd;
    --surface-container-lowest: #ffffff;
    --surface-container-low: var(--gray-3);
    --surface-container: var(--gray-3);
    --surface-container-high: #ece7eb;
    --surface-container-highest: #e6e1e6;
    --overlay: rgb(0 0 0 / .5);
    --active: rgb(0 0 0 / .1);
    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);
    --elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);
    --elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);
    --secondary-container: var(--gray-4);
  }
}

body, nav:is(.left,.right) {
  background-color: var(--background);
}

article {
  background-color: var(--surface);
}

.author {
  color: inherit
}

.status nav, .status nav .chip {
  color: var(--gray-7)
}

.avatar::after {
  background-color: var(--surface);
  border: 1px dashed var(--on-surface)
}

  article.ephemeral {
    border: 2px dashed var(--outline)
  }

  article.now {
    background-color: var(--green-2);
    color: var(--black)
  }

  a.row.indent {
    border-left: 1px solid var(--outline)
  }

  .markdown-editor .editor-preview {
    background: var(--surface)
  }

  menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
    background-color: var(--active)
  }

  #advanced :is(.field.textarea, textarea), .EasyMDEContainer, article.paste code {
    background-color: #212121;
    color: #eff
  }