*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
  --theme-bg: #f8faf5;
  --theme-bg-soft: #fbfbfb;
  --theme-text: #000;
  --theme-muted: rgba(0, 0, 0, 0.42);
  --theme-border: rgba(0, 0, 0, 0.16);
  --theme-transition-color: #f8faf5;
  --page-transition-duration: 360ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-bg: #252624;
    --theme-bg-soft: #2f302e;
    --theme-text: #c2c0b6;
    --theme-muted: rgba(194, 192, 182, 0.54);
    --theme-border: rgba(194, 192, 182, 0.18);
    --theme-transition-color: #252624;
  }
}

html,
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  user-select: text;
  -webkit-user-select: text;
}

::selection {
  background: #AFB69A;
  color: #fff;
}

::-moz-selection {
  background: #AFB69A;
  color: #fff;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: var(--theme-transition-color);
  opacity: 0;
  transition: opacity var(--page-transition-duration) ease;
  will-change: opacity;
}

.page-transition.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: page-fade-in 260ms ease both;
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    background-color: var(--theme-transition-color);
  }

  to {
    opacity: 1;
  }
}