/* Auth Container and Body */
.auth-body {
    background-color: var(--clr-surface-soft);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-xl);
}

.auth-container {
    width: 100%;
    max-width: 480px;
}

/* Modal Card (Pinterest Style) */
.modal-card {
    background-color: var(--clr-canvas);
    border-radius: var(--rd-lg);
    padding: var(--sp-xxl);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Ambient shadow */
    text-align: center;
}

/* Typography & Layout */
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-lg);
}

.auth-logo-icon {
    font-size: 28px;
    width: 100px;
    height: auto;
    object-fit: contain;
}

.auth-title {
    font-family: var(--ff-display);
    font-size: var(--fs-heading-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading-xl);
    letter-spacing: var(--ls-heading-xl);
    color: var(--clr-ink);
    margin-bottom: var(--sp-xs);
}

.auth-subtitle {
    font-size: var(--fs-body-md);
    color: var(--clr-charcoal);
    margin-bottom: var(--sp-xl);
}

/* Form Styles */
.auth-form {
    text-align: left;
}

.auth-form-group {
    margin-bottom: var(--sp-lg);
}

.auth-label {
    display: block;
    font-size: var(--fs-body-md);
    font-weight: var(--fw-semibold);
    color: var(--clr-ink);
    margin-bottom: var(--sp-xs);
}

.auth-submit-btn {
    width: 100%;
    margin-top: var(--sp-sm);
    height: var(--btn-height);
    font-size: var(--fs-button-md);
}

/* Alert Box */
.auth-alert {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-md);
    border-radius: var(--rd-md);
    margin-bottom: var(--sp-xl);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    text-align: left;
}

.auth-alert--error {
    background-color: var(--clr-error-deep);
    color: var(--clr-on-primary);
}