/* Stable, namespace-safe foundation styles. */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--qn-color-canvas); }

body {
  margin: 0;
  background: var(--qn-color-canvas);
  color: var(--qn-color-text);
  font-family: var(--qn-font-sans);
  font-size: var(--qn-font-size-body);
  line-height: var(--qn-line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--qn-color-text-strong); background: var(--qn-color-brand-soft); }

a { color: var(--qn-color-brand); text-underline-offset: 3px; }
a:hover { color: var(--qn-color-brand-hover); }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }

:focus-visible { outline: 2px solid var(--qn-color-brand); outline-offset: 2px; }