@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-family: theme("fontFamily.main");
  font-size: theme("fontSize.2xl");
}

/* Color scheme */

.color-scheme--sync .color-scheme--light-icon {
  display: none;
}

.color-scheme--sync .color-scheme--dark-icon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .color-scheme--sync .color-scheme--light-icon {
    display: block;
  }

  .color-scheme--sync .color-scheme--dark-icon {
    display: none;
  }
}

.color-scheme--dark .color-scheme--dark-icon,
.color-scheme--light .color-scheme--light-icon {
  display: none;
}

.color-scheme--dark .color-scheme--light-icon,
.color-scheme--light .color-scheme--dark-icon {
  display: block;
}

/* Typography */

.prose p {
  @apply mb-4;
}

.link,
.prose a {
  color: theme("colors.red.900");
  border-bottom: 4px solid theme("colors.red.100");
  transition: border-color 200ms;
}

.link:hover,
.prose a:hover {
  color: theme("colors.red.700");
  border-bottom: 4px solid theme("colors.red.200");
}