/* Element-level base styles: page background, typography, links, code, horizontal rules. */
html {
    min-height: 100%;
    font-size: 100%;
}

body {
    min-height: 100vh;
    color: var(--app-text);
    font-family: var(--app-font-body);
    font-size: var(--app-text-md);
    background:
        radial-gradient(ellipse at top left, var(--app-bg-glow), transparent 38rem),
        radial-gradient(ellipse at bottom right, var(--app-bg-glow-2), transparent 32rem),
        linear-gradient(170deg, var(--app-bg-soft), var(--app-bg) 60%);
    background-attachment: fixed;
}

/* Faint wood-grain lines, fading out towards the bottom. */
body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background-image: repeating-linear-gradient(
        100deg,
        transparent 0,
        transparent 18px,
        rgba(214, 178, 120, 0.028) 19px,
        transparent 20px
    );
    mask-image: linear-gradient(to bottom, black, transparent 85%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-text-strong);
    font-family: var(--app-font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

h1 {
    font-size: var(--app-text-3xl);
}

h2 {
    font-size: var(--app-text-2xl);
}

h3 {
    font-size: var(--app-text-xl);
}

h4 {
    font-size: var(--app-text-lg);
}

h5,
h6 {
    font-size: var(--app-text-md);
}

p {
    margin-bottom: var(--app-space-4);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--app-primary-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--app-transition);
}

a:hover {
    color: var(--app-text-strong);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

hr {
    height: 1px;
    margin: var(--app-space-5) 0;
    border: none;
    background: linear-gradient(90deg, transparent, var(--app-border-strong), transparent);
}

small {
    font-size: var(--app-text-sm);
}

strong,
b {
    font-weight: 700;
}

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

code,
kbd {
    padding: 0.1em 0.4em;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-sunken);
}

pre {
    overflow-x: auto;
    padding: var(--app-space-4);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-sunken);
}

blockquote {
    margin: var(--app-space-4) 0;
    padding: var(--app-space-3) var(--app-space-4);
    border-inline-start: 3px solid var(--app-primary);
    color: var(--app-muted);
    font-family: var(--app-font-display);
    font-style: italic;
    font-size: var(--app-text-lg);
}

::selection {
    color: var(--app-primary-contrast);
    background: var(--app-primary-soft);
}