/* ═══════════════════════════════════════════════════════════
   LievoEngine — Layout auth: stile specifico
   Versione: 07-05-2026

   Co-locato a layouts/auth.php. Davide espone via HTTP a /assets/layouts/auth.css.

   Tutto namespacato `.lv-auth__*` per non collidere con primitives core.css o
   con `.lv-app__*` di app.css.
   Usa variabili `--lv-*` da tokens.css.
   ═══════════════════════════════════════════════════════════ */


/* ─── Body wrapper ───────────────────────────────────── */

.lv-auth {
    background-color: var(--lv-c-bg);
    color: var(--lv-c-fg);
    min-height: 100vh;
}


/* ─── Main centrato vert/horz ────────────────────────── */

.lv-auth__main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lv-s-6);
    padding: var(--lv-s-6) var(--lv-s-4);
}


/* ─── Brand ──────────────────────────────────────────── */

.lv-auth__brand {
    font-family: var(--lv-ff-display);
    font-size: var(--lv-fs-xl);
    font-weight: var(--lv-fw-semibold);
    color: var(--lv-c-fg-strong);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: color var(--lv-d-fast) var(--lv-ease);
}

.lv-auth__brand:hover {
    color: var(--lv-c-accent);
}


/* ─── Card ───────────────────────────────────────────── */

.lv-auth__card {
    width: 100%;
    max-width: 420px;
    background-color: var(--lv-c-surface);
    border: var(--lv-b-width) solid var(--lv-c-border);
    padding: var(--lv-s-8);
    display: flex;
    flex-direction: column;
    gap: var(--lv-s-5);
}


/* ─── Footer links sotto la card ─────────────────────── */

.lv-auth__footer-links {
    width: 100%;
    max-width: 420px;
    text-align: center;
    font-size: var(--lv-fs-sm);
    color: var(--lv-c-fg-muted);
}

.lv-auth__footer-links a {
    color: var(--lv-c-fg-muted);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.lv-auth__footer-links a:hover {
    color: var(--lv-c-accent);
}


/* ─── Mobile ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .lv-auth__main {
        gap: var(--lv-s-4);
        padding: var(--lv-s-4);
    }

    .lv-auth__card {
        max-width: 100%;
        padding: var(--lv-s-6) var(--lv-s-5);
    }
}