:root {
  color-scheme: dark;
  --mc-charcoal-950: 12 18 28;
  --mc-charcoal-900: 19 29 42;
  --mc-charcoal-800: 29 42 57;
  --mc-charcoal-700: 42 57 73;
  --mc-charcoal-600: 63 77 91;
  --mc-neutral-500: 125 128 130;
  --mc-neutral-400: 166 169 169;
  --mc-neutral-300: 198 201 200;
  --mc-neutral-200: 222 224 220;
  --mc-neutral-100: 244 244 239;
  --mc-border: 47 60 74;
  --mc-gold-300: 255 231 153;
  --mc-gold-400: 255 211 71;
  --mc-gold-500: 250 189 24;
  --mc-gold-550: 232 168 17;
  --mc-gold-600: 214 146 10;
  --mc-scarlet-400: 222 94 78;
  --mc-scarlet-500: 201 51 42;
  --mc-scarlet-600: 169 39 33;
  --mc-font-sans: "Inter", system-ui, sans-serif;
  --mc-font-display: "Playfair Display", Georgia, serif;
}

:where(a, button, input):focus-visible {
  outline: 2px solid rgb(var(--mc-gold-400));
  outline-offset: 2px;
}