html, body { height: 100%; }

body {
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--fg);
    background: var(--bg);
    transition: background var(--t-base), color var(--t-base);
    font-feature-settings: "ss01", "cv11";
}

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

::placeholder {
    color: var(--fg-dim);
    opacity: 1;
}

a {
    color: inherit;
    transition: color var(--t-base);
}

a:hover { color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus);
    border-radius: var(--r-md);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-sans);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    color: var(--fg);
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }
h6 {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    font-family: var(--ff-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--fg-dim);
}

p { line-height: var(--lh-base); }

code, kbd, samp, pre {
    font-family: var(--ff-mono);
    font-size: 0.92em;
}

kbd {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: var(--r-xs);
    padding: 1px 5px;
    font-size: var(--fs-xs);
    color: var(--fg);
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--sp-6) 0;
}

mark {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0 2px;
    border-radius: var(--r-xs);
}

abbr[title] {
    text-decoration: underline dotted;
    text-decoration-color: var(--line-strong);
    cursor: help;
}

.h-display {
    font-size: var(--fs-5xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
}

.h-eyebrow {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--fg-dim);
}

.t-mono     { font-family: var(--ff-mono); }
.t-muted    { color: var(--fg-muted); }
.t-dim      { color: var(--fg-dim); }
.t-accent   { color: var(--accent); }
.t-success  { color: var(--success); }
.t-warning  { color: var(--warning); }
.t-danger   { color: var(--danger); }
.t-num      { font-variant-numeric: tabular-nums; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}