html {
    color-scheme: light;
}

:root,
[data-theme="light"] {
    --brand: #FF84BA;
    --brand-hover: #e868a8;
    --brand-soft: rgba(255, 132, 186, 0.22);
    --bulma-primary-h: 330deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 76%;
    --bulma-scheme-main: #ffffff;
    --bulma-scheme-main-bis: #fff7fb;
    --bulma-text: #2a1a22;
    --bulma-text-strong: #241018;
    --bulma-border: #f0d3e2;
    --bulma-body-background-color: transparent;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body.login-page {
    background-color: #f8eef3;
    background-image:
        radial-gradient(circle at 12% 18%, var(--brand-soft), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(255, 182, 210, 0.45), transparent 38%),
        linear-gradient(160deg, #fff5f9 0%, #f8eef3 50%, #f3e4ec 100%);
    background-attachment: fixed;
}

.login-page .hero,
.login-page .hero-body {
    background: transparent !important;
}

.login-box.box {
    background: #ffffff !important;
    color: #2a1a22 !important;
    border: 1px solid #f0d3e2;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(255, 132, 186, 0.18);
    padding: 2rem;
}

.login-box .title,
.login-box .label,
.login-box .checkbox {
    color: #241018 !important;
}

.login-box .subtitle {
    color: #7a5a68 !important;
}

.login-box .input {
    background: #ffffff !important;
    color: #2a1a22 !important;
    border-color: #e8c4d6 !important;
}

.login-box .input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.125em rgba(255, 132, 186, 0.35);
}

.login-box .button.is-primary {
    background-color: var(--brand) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700;
}

.login-box .button.is-primary:hover {
    background-color: var(--brand-hover) !important;
    color: #ffffff !important;
}

.login-brand {
    letter-spacing: -0.03em;
}