:root {
  --c-bg: #ffffff;
  --c-bg-elevated: #f5f5f5;

  --c-text: hsl(0 0% 10%);
  --c-text-faded: hsl(0 0% 50%);
  --c-text-subtle: hsl(0 0% 70%);
  --c-text-accent: hsl(338 61% 66%);

  --c-line: hsl(0 0% 88%);
}

.c-text-accent {
  color: var(--c-text-accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: hsl(0 0% 7%);
    --c-bg-elevated: hsl(0 0% 25%);
    
    --c-text: hsl(0 1% 90%);
    --c-text-faded: hsl(0 4% 55%);
    --c-text-subtle: hsl(0 4% 40%);
    --c-text-accent: hsl(338 61% 66%);
    
    --c-line: hsl(0 0% 22%);
  }

  html {
    -webkit-font-smoothing: antialiased;
  }

  .img {
    filter: brightness(0.85);
  }
}