/* Tunet base: canvas, selection, focus and the skip link.
   Every design token (brand colours included) lives in system.css :root; components live in system.css. */
:root { color-scheme: dark; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    background: var(--canvas);
    color: var(--ink-1);
    font-synthesis-weight: none;
}
/* Machine text keeps its own spacing. */
:is(pre, code, kbd, samp) { letter-spacing: 0; }

::selection { background: var(--brand-accent); color: var(--brand-ink); }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-accent); }

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: var(--z-skip);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--brand-accent);
    color: var(--brand-ink);
    font: 600 0.9375rem/1.2 var(--font-sans);
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }