:root {
    --bg-color: #000000;
    --text-color: #fafafa;
    --text-secondary: #bbb;
    --text-muted: #888;
    --text-dim: #777;
    --text-faint: #555;
    --accent: #ffe0b2;
    --border-color: #1a1a1a;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;

    --lw-popup-font-family: sans-serif;
    --lw-popup-bg: #111;
    --lw-popup-color: var(--text-color);
    --lw-popup-border-color: var(--border-color);
    --lw-popup-border-radius: 8px;
    --lw-popup-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    --lw-reference-color: var(--accent);
    --lw-reference-font-family: sans-serif;
    --lw-verse-number-color: var(--text-dim);
    --lw-verse-number-font-family: sans-serif;
    --lw-more-color: var(--accent);

    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Noto Sans', 'Segoe UI', Arial, sans-serif;
}

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

.link-icon {
    vertical-align: -0.15em;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

@supports (view-transition-name: none) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(root) {
        animation-duration: 0.3s;
    }

    ::view-transition-old(root) {
        animation: vt-fade-out 0.3s ease both;
    }

    ::view-transition-new(root) {
        animation: vt-fade-in 0.3s ease both;
    }

    @keyframes vt-fade-out {
        to {
            opacity: 0;
        }
    }

    @keyframes vt-fade-in {
        from {
            opacity: 0;
        }
    }
}