:root {
  /* colors */
  --background-color: #F5F5F7;
  --block-background-color: #E9E8ED;
  --border-color: #d0d7de;
  --text-color: #1D1D1F;
  --secondary-text-color: #6E6E73;
  --link-color: #277BD9;
  --bright-background-color: #FAFAFA;

  /* fonts */
  --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
  --serif-font-family:  "Noto Serif SC", serif;
  --content-font-size: 20px;

  --page-width: 700px;

  /* pagefind custom css */
  --pagefind-ui-primary: var(--text-color);
  --pagefind-ui-text: var(--text-color);
  --pagefind-ui-background: var(--background-color);
  --pagefind-ui-border: var(--border-color);
  --pagefind-ui-tag: var(--border-color);
}

html[lang="en-US"] {
    --serif-font-family: "Playfair Display", serif;
}

@mixin variablesInDarkMode {
    --background-color: #1D2021;
    --block-background-color: #181A1B;
    --border-color: rgba(255,255,255,0.2);
    --text-color: #D2CEC9;
    --secondary-text-color: #A1998D;
    --link-color: #277BD9;
    --bright-background-color: #666;
}

.dark {
  @include variablesInDarkMode;
}

@media (prefers-color-scheme: dark) {
  :root {
    @include variablesInDarkMode;
  }
}

@mixin bordered {
    border-radius: .5rem;
    border: 1px solid var(--border-color);
}