/* ═══════════════════════════════════════
   DIVA2 · Perfect Inc. MZ — Theme System
   Inclui este ficheiro em TODAS as páginas
═══════════════════════════════════════ */

:root {
    --p1:   #b44fce;
    --p2:   #e91e8c;
    --grad: linear-gradient(135deg, var(--p1), var(--p2));

    /* ── DARK (padrão) ── */
    --bg:            #0d0510;
    --surface:       #160b1e;
    --surface2:      #1e0f2a;
    --border:        rgba(255,255,255,0.07);
    --text:          #e8dff0;
    --text-strong:   #ffffff;
    --muted:         #9d8aaa;
    --navbar-bg:     rgba(13,5,16,0.88);
    --footer-bg:     #080210;
    --strip-bg:      rgba(255,255,255,0.04);
    --feature-hover: #1e0f2a;
    --modal-bg:      #130820;
    --input-bg:      rgba(255,255,255,0.05);
    --input-focus:   rgba(255,255,255,0.08);
    --card-shadow:   0 8px 32px rgba(0,0,0,0.35);
}

/* ── LIGHT ── */
html.light {
    --bg:            #f5eeff;
    --surface:       #ffffff;
    --surface2:      #f0e6ff;
    --border:        rgba(180,79,206,0.13);
    --text:          #1a0a24;
    --text-strong:   #0d0510;
    --muted:         #7c5f8a;
    --navbar-bg:     rgba(253,244,255,0.92);
    --footer-bg:     #f3e8ff;
    --strip-bg:      rgba(180,79,206,0.05);
    --feature-hover: #fce7ff;
    --modal-bg:      #ffffff;
    --input-bg:      rgba(180,79,206,0.06);
    --input-focus:   rgba(180,79,206,0.10);
    --card-shadow:   0 8px 32px rgba(180,79,206,0.10);
}

/* ── TRANSIÇÕES GLOBAIS ── */
*,
body,
.navbar,
.sidebar,
.topbar,
.card-diva,
.stat-card,
.step-card,
.plan-card,
.about-card,
.feature-item,
.modal-content,
.form-control,
.input-group-text {
    transition:
        background-color .3s ease,
        border-color     .3s ease,
        color            .25s ease,
        box-shadow       .3s ease;
}

/* ── UTILITÁRIOS PARTILHADOS ── */
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-grad {
    background: var(--grad);
    color: #fff !important;
    border: none;
    transition: opacity .2s, transform .2s !important;
}
.btn-grad:hover { opacity: .88; transform: translateY(-1px); }

.btn-outline-grad {
    background: transparent;
    border: 1.5px solid var(--p2);
    color: var(--p2);
    transition: all .2s !important;
}
.btn-outline-grad:hover { background: var(--p2); color: #fff !important; }

/* ── THEME TOGGLE BTN ── */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .95rem;
    flex-shrink: 0;
    transition: all .25s !important;
}
.theme-toggle:hover {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
}