/* Element-level base styles: page background, links and typography. */
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: var(--app-text);
    background:
        radial-gradient(circle at top left, rgba(245, 196, 81, 0.16), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.18), transparent 30rem),
        linear-gradient(135deg, var(--app-bg), var(--app-bg-soft));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background-image: radial-gradient(rgba(196, 181, 253, 0.08) 1px, transparent 1.4px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

a {
    color: var(--app-primary);
    text-underline-offset: 0.22em;
}

a:hover {
    color: var(--app-primary-soft);
}

.display-6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--app-text-strong);
    letter-spacing: -0.035em;
}

.lead {
    color: var(--app-muted);
}

.text-body-secondary,
.link-secondary {
    color: var(--app-muted) !important;
}