@import url("../fonts/Montserrat.css") layer(theme);
@import url("../fonts/MontserratAlternates.css") layer(theme);

@layer theme {
  [data-theme="default"] {
    --font-brand: "Montserrat Alternates", sans-serif;
    --font-site: "Montserrat", sans-serif;
    --color-site-1: #ffffff;
    --color-site-2: #110c14;
    --color-site-2-1: #291d32;
  }

  /* Minimal Globals */
  html {
    font-family: var(--font-site);
    color: var(--color-site-1);
    background-color: var(--color-site-2);
  }

  html,
  body {
    min-height: 100vh;
  }

  /**
   * <x-container> provides an HTML node that doesn't participate in layout,
   * useful for elements that shouldn't impact style or semantics.
   */
  x-container {
    display: contents;
  }
}