/* lattice-auth.css — butter/Lattice reskin of the auth pages.
   Loaded AFTER auth.css; overrides look only, never layout-critical
   selectors or any JS-facing ids. The auth flow is the one funnel step
   that was still old-design (register was the visible seam between the
   Lattice pages and the platform). */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --lat-bg: #FCFBF8;
    --lat-ink: #16130C;
    --lat-ink-soft: #5C553F;
    --lat-ink-mute: #8B8266;
    --lat-line: rgba(22, 19, 12, .1);
    --lat-butter: #E8C15A;
    --lat-butter-deep: #8A6D1F;
    --lat-butter-soft: rgba(232, 193, 90, .14);
}
@media (prefers-color-scheme: dark) {
    :root {
        --lat-bg: #100E09;
        --lat-ink: #F2ECDD;
        --lat-ink-soft: #B5AC91;
        --lat-ink-mute: #837B62;
        --lat-line: rgba(242, 236, 221, .12);
        --lat-butter: #F0CD6E;
        --lat-butter-deep: #E8C15A;
        --lat-butter-soft: rgba(240, 205, 110, .1);
    }
}

body,
.auth-wrapper {
    font-family: 'Inter', system-ui, sans-serif !important;
    background: var(--lat-bg) !important;
    background-image:
        radial-gradient(900px 480px at 85% -10%, var(--lat-butter-soft), transparent 62%) !important;
    color: var(--lat-ink) !important;
}

.auth-card {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 26px !important;
    box-shadow: 0 18px 50px rgba(22, 19, 12, .09) !important;
}
@media (prefers-color-scheme: dark) {
    .auth-card {
        background: rgba(30, 27, 18, .85) !important;
        border-color: rgba(242, 236, 221, .1) !important;
    }
}

.auth-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
    color: var(--lat-ink) !important;
}
.auth-subtitle { color: var(--lat-ink-mute) !important; }
.form-label { color: var(--lat-ink-soft) !important; }

.form-input, input, select, textarea {
    background: var(--lat-bg) !important;
    color: var(--lat-ink) !important;
    border: 1px solid var(--lat-line) !important;
    border-radius: 13px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
.form-input:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--lat-butter) !important;
    outline-offset: 1px !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--lat-butter) !important;
    color: #241D08 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), filter .2s !important;
}
.btn-primary:hover { transform: translateY(-1px) !important; filter: brightness(1.06) !important; }
.btn-primary::after { display: none !important; }

.btn-social {
    border-radius: 999px !important;
    border: 1.5px solid var(--lat-line) !important;
    background: transparent !important;
    color: var(--lat-ink) !important;
}
.btn-social:hover { border-color: var(--lat-butter) !important; }

a { color: var(--lat-butter-deep); }