:root {
    --feelup-prune: #744259;
    --feelup-rose: #bc6569;
    --feelup-indigo: #312d6b;
    --feelup-ink: #221c47;
    --feelup-background: #f7f4fb;
    --feelup-gradient: linear-gradient(135deg, var(--feelup-rose), var(--feelup-ink));
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--feelup-background);
}

h1,
.brand-title {
    font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.35;
}

main h1[class],
main .brand-title {
    color: var(--feelup-ink);
}

.gradient-bg,
.card.gradient-bg,
.brand-button {
    background: var(--feelup-prune);
}

.brand-button:hover:not(:disabled) {
    background: #62374b;
}

.brand-button:disabled {
    background: #e5e7eb;
    color: #6b7280;
}

.gradient-text {
    background: linear-gradient(135deg, var(--feelup-prune), var(--feelup-indigo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-gradient {
    background: linear-gradient(90deg, var(--feelup-prune), var(--feelup-indigo));
}

.card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.brand-login {
    background: var(--feelup-gradient);
}

.brand-symbol {
    background: var(--feelup-background);
}

.brand-symbol img {
    width: 40px;
    height: 40px;
}

.brand-welcome {
    border-top: 3px solid var(--feelup-rose);
}

.brand-login input:focus-visible,
.brand-button:focus-visible {
    outline: 3px solid var(--feelup-prune);
    outline-offset: 3px;
}