:root {
    --page-bg:
        radial-gradient(ellipse 80% 60% at 50% 0%, #2a1730 0%, transparent 70%),
        #160e18;
    --heading: #2a1630;
    --outline: #4a2a52;
    --paper: #fbf5ec;
    --paper-2: #f1e6d6;
    --ink: #241a22;
    --muted: #6b5d66;
    --accent: #c2551b;
    --accent-dark: #9e4413;
    --highlight: #e8a33d;
    --line: #e4d6c4;
    --on-bg: #fff;
    --backdrop: rgba(14, 8, 16, 0.75);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.25);
    --serif: "Cinzel", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Gløder i baggrunden */
.glints { position: absolute; inset: 0; overflow: hidden; }
.glint {
    position: absolute; left: var(--l); top: var(--t); width: var(--s); height: var(--s);
    border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, #ffe2b8 0 18%, #f08a2c 40%, rgba(240, 138, 44, 0) 70%);
    box-shadow: 0 0 calc(var(--s) * 1.6) rgba(240, 120, 40, 0.5);
    animation: ember var(--d) ease-in-out var(--delay) infinite;
}
@keyframes ember {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.4); }
    45% { opacity: var(--o); transform: translateY(-18px) scale(1); }
    70% { opacity: calc(var(--o) * 0.5); transform: translateY(-30px) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
    .glints { display: none; }
}