* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--raft-color-bg-page);
  color: var(--raft-color-text-primary);
  font-family: var(--raft-font-ui);
  line-height: var(--raft-line-height-body);
  min-height: 100vh;
}

[data-density="compact"] { font-size: var(--raft-font-size-sm); }

h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: var(--raft-font-weight-semibold); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a {
  color: var(--raft-color-text-primary);
  text-decoration: none;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
a:hover { text-decoration: underline; }

.brand-label { font-family: var(--raft-font-brand); font-weight: var(--raft-font-weight-bold); }
.raft-targets-stage { font-family: var(--raft-font-body, var(--raft-font)); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--raft-focus-color);
  outline-offset: 2px;
}

:where(button, a, input, select, textarea, summary) {
  transition-duration: var(--raft-motion-fast);
  transition-property: background-color, border-color, box-shadow, color, opacity;
}

.raft-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}