:root {
  /*
    Color schemes
  */
  color-scheme: light dark;
  --prickly-pear-yellow: #735f02;
  --eclipse-gray: #3a3a3a;
  --pumpkin-olive: #59521c;
  --manhattan-steel-blue: #224553;
  --pine-green: #36581d;
  --brown-swiss-calf-brown: #543c21;
  --ear-tag-red: #67160e;
  --flaming-gorge-blue: #1b3e5a;
  --hayyard-green: #355322;
  --coeurdalene-purple: #1b245a;
  --brown-swiss-cow-brown: #563c1f;
  --buffalo-blue: #0b496a;
  --saddle-blue: #104165;
  --brown-swiss-gray: #eaddca;

  /*
    Fonts
  */
  --font-family-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
    "URW Bookman L", "Georgia Pro", Georgia, serif;
  --font-family-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
    "DejaVu Serif", "Sitka Small", serif;
  --font-family-system-ui: system-ui, sans-serif;

  /*
    Breakpoint
  */
  @property --responsive-breakpoint {
    syntax: "<length>";
    inherits: false;
    initial-value: 768px;
  }
}

/*
  Default element styles (for small screens)
*/

html {
  background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
  font-family: var(--font-family-slab-serif);
}