:root {
  --mirages-accent: #1abc9c;
  --mirages-page-light: #fff;
  --mirages-page-sunset: #f8f1e4;
  --mirages-page-dark: #2c2a2a;
  --mirages-raised-dark: #343232;
  --mirages-text-light: #202020;
  --color-accent: var(--mirages-accent);
  --color-accent-strong: #138a74;
  --color-accent-contrast: #102b27;
  --mirages-font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mirages-font-sans: "Mirages Custom", Merriweather, "Open Sans", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
  --mirages-font-serif: "Noto Serif SC", serif;
  --mirages-font-code: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
  --font-sans: var(--mirages-font-sans);
  --font-serif: var(--mirages-font-serif);
  --reading-font-family: var(--mirages-font-sans);
  --content-width: 704px;
  --article-content-width: 606px;
  --page-width: 720px;
  --nav-height: 4rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-soft: 0 14px 40px rgb(20 25 24 / 9%);
  --transition-fast: 160ms ease;
}

@media (min-width: 1302px) {
  :root {
    --content-width: 848px;
    --article-content-width: 662px;
    --page-width: 864px;
  }
}

@media (min-width: 1600px) {
  :root {
    --content-width: 880px;
    --article-content-width: 720px;
    --page-width: 896px;
  }
}

@media (min-width: 1800px) {
  :root {
    --content-width: 944px;
    --article-content-width: 752px;
    --page-width: 960px;
  }
}

@media (min-width: 1920px) {
  :root {
    --content-width: 976px;
    --article-content-width: 800px;
    --page-width: 992px;
  }
}

@media (min-width: 2400px) {
  :root {
    --content-width: 1008px;
    --article-content-width: 850px;
    --page-width: 1024px;
  }
}