/* 04-elements/_elements.css — bare, UNCLASSED HTML defaults only. Classed markup → components. */
html { font-family: var(--font-mono); font-size: 16px; }
body {
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--lh-cell);
  font-weight: var(--fw-regular);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text-bright); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { max-width: var(--measure); }
strong, b { font-weight: var(--fw-bold); color: var(--text-bright); }
em, i { font-style: normal; color: var(--accent); } /* italics read badly in mono — emphasize by hue */
small { font-size: var(--text-sm); color: var(--text-muted); }

code, kbd, samp { font-family: var(--font-mono); }
kbd {
  font-size: var(--text-xs);
  color: var(--accent);
  border: var(--bw) solid var(--line-strong);
  padding: 0 var(--space-2xs);
}

hr { border: 0; border-top: var(--bw) solid var(--line); margin-block: var(--space-lg); }

ul, ol { padding-left: 2.4ch; max-width: var(--measure); }
li { margin-block: var(--space-2xs); }
li::marker { color: var(--accent); }

::selection { background: var(--accent); color: var(--text-on-accent); }

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