:root {
    --replayit-surface: #0b0f14;
    --replayit-navbar-surface: rgba(11, 15, 20, 0.75);
    --replayit-navbar-divider: rgba(255, 255, 255, 0.05);
    --replayit-footer-surface: rgba(11, 15, 20, 0.75);
    --replayit-footer-divider: rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] {
    --custom-color-gentle-sky: #c3d1e2;
    --custom-color-soft-pink: #e1c5c5;
    --replayit-surface:
        radial-gradient(1100px 550px at 65% -10%, rgba(59, 130, 246, 0.28), transparent 65%),
        radial-gradient(900px 520px at 0% 5%, rgba(14, 165, 233, 0.22), transparent 60%),
        radial-gradient(700px 420px at 92% 45%, rgba(45, 212, 191, 0.18), transparent 65%),
        linear-gradient(135deg, #f4f7ff 0%, #edf6ff 45%, #f8fbff 100%);
    --replayit-navbar-surface: rgba(246, 248, 251, 0.75);
    --replayit-navbar-divider: rgba(15, 23, 42, 0.08);
    --replayit-footer-surface: rgba(246, 248, 251, 0.78);
    --replayit-footer-divider: rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
    --custom-color-gentle-sky: #2a3348;
    --custom-color-soft-pink: #563434;
    --replayit-surface:
        radial-gradient(1200px 600px at 70% -10%, rgba(34, 211, 238, 0.2), transparent 60%),
        radial-gradient(900px 500px at 10% 10%, rgba(167, 139, 250, 0.16), transparent 55%),
        #0b0f14;
    --replayit-navbar-surface: rgba(11, 15, 20, 0.25);
    --replayit-navbar-divider: rgba(255, 255, 255, 0.05);
    --replayit-footer-surface: rgba(11, 15, 20, 0.25);
    --replayit-footer-divider: rgba(255, 255, 255, 0.05);
}

html {
    background: var(--replayit-surface);
    min-height: 100%;
    background-attachment: fixed;
}

.has-background-gentle-sky {
    background-color: var(--custom-color-gentle-sky);
}

.has-background-soft-pink {
    background-color: var(--custom-color-soft-pink);
}

.is-white {
    color: white;
}

.has-background-riot {
    background-color: rgb(216, 46, 52);
}

.has-background-transparent {
    background-color: transparent;
}

.navbar {
    background-color: var(--replayit-navbar-surface) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--replayit-navbar-divider);
}

.footer {
    background-color: var(--replayit-footer-surface) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--replayit-footer-divider);
}

.has-text-weak { color: var(--bulma-text-weak) !important; }

.has-background-mmr-radar {
    background-color: rgba(255, 52, 68, 0.18);
}

.has-background-mmradar {
    background-color: rgba(32, 34, 39, 0.5) !important;
}