/* Minimal element defaults. Consumers link styles.css and inherit these. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--type-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; color: var(--text-body); }
h1 { font: var(--type-display); letter-spacing: var(--text-display-tracking); }
h2 { font: var(--type-heading); letter-spacing: var(--text-heading-tracking); }
h3 { font: var(--type-title); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--easing); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
code, kbd, samp { font: var(--type-mono); letter-spacing: var(--text-mono-tracking); }
input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1 }
/* Hit-area expansion: keeps a control's visual size while guaranteeing the 44px
   minimum touch target. Applied by Button/IconButton at their small size. */
[data-ch-hit] { position: relative }
[data-ch-hit]::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: var(--tap-min); min-width: var(--tap-min); }