@view-transition {
  navigation: auto;
}

:root {
  color-scheme: light dark;
}

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

body {
  font-family: system-ui, sans-serif;
  max-inline-size: 64rem;
  margin-inline: auto;
  padding: 2rem;
  line-height: 1.6;
}

.priority {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  &[data-level="high"] {
    color: light-dark(#b91c1c, #fca5a5);
  }

  &[data-level="medium"] {
    color: light-dark(#a16207, #fcd34d);
  }

  &[data-level="low"] {
    opacity: 0.5;
  }
}