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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-backdrop);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fz-lg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/*
  Blazor's own script reveals this banner (display: block) when a circuit or an
  enhanced-navigation request fails, so it MUST default to hidden.

  The default project template ships that rule in app.css. This file replaced the template's
  version wholesale when the design tokens landed, and the rule was not carried across — so the
  banner rendered on every authenticated page, permanently, claiming an error that had not
  happened. Both AppShell and SelfServeShell emit the element, which is why the rule lives here
  globally rather than in either component's scoped stylesheet.
*/
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-5);
  background: var(--color-danger-tint);
  color: var(--color-danger);
  border-top: 1px solid var(--color-danger);
  box-shadow: var(--shadow-md);
  font-size: var(--fz-md);
}

#blazor-error-ui .reload {
  color: var(--color-danger);
  text-decoration: underline;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-3);
}