/**
 * Brownie Base Styles
 * 
 * Base styles work with Brownie's component registration to
 * prevent the flash of unstyled content while components register.
 *
 * We also style base HTML elements to follow the Brownie theme
 * and update some spacing/box-sizing values to be more predictable.
 * Opt-into brownie base styling using the brownie-base class.
 */
@layer base {

/* Setup color scheme */
:root {
  color-scheme: light dark;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* Hide body until Brownie is ready */
html:not(.brownie-ready) body {
  visibility: hidden;
}

/* Fade in when ready */
html.brownie-ready body {
  visibility: visible;
  animation: brownie-fade-in 150ms ease;
}

@keyframes brownie-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Base resets and typography */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100lvh;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-header);
}

code,
pre {
  font-family: var(--font-code);
}

}