/*
 * Frontend base.
 * Bootstrap remains responsible for its reset and grid.
 */

html[data-fe-theme] {
    min-height: 100%;
    background: var(--fe-page);
}

body.fe-app {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at 14% 4%, rgba(255, 255, 255, .56), transparent 24%),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--fe-brand-primary) 10%, transparent), transparent 28%),
        var(--fe-page);
    color: var(--fe-text);
}

body.fe-app *,
body.fe-app *::before,
body.fe-app *::after {
    box-sizing: border-box;
}

body.fe-app a {
    color: var(--fe-primary);
    text-decoration: none;
}

body.fe-app a:hover {
    color: var(--fe-primary-hover);
}

body.fe-app :focus-visible {
    outline: 0;
    box-shadow: var(--fe-focus);
}

body.fe-app h1,
body.fe-app h2,
body.fe-app h3,
body.fe-app h4,
body.fe-app h5,
body.fe-app h6 {
    color: var(--fe-text);
    font-weight: var(--fe-weight-semibold);
}

.fe-muted {
    color: var(--fe-text-muted);
}

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

details {
    margin-top: 10px;
}