/*
 * Login / Signup — Modernised
 * Uses design tokens; works in both light + dark themes automatically.
 */

#container {
    max-width: 460px;
    margin: 80px auto;
    padding: 0 var(--tua-space-4);
}
header {
    align-items: center;
    justify-content: center;
}
h1 {
    font-weight: var(--tua-fw-extrabold);
    font-size: var(--tua-fs-3xl);
    color: var(--tua-text-primary);
    margin-bottom: var(--tua-space-3);
    text-align: center;
    letter-spacing: var(--tua-tracking-tight);
}
h2 {
    font-weight: var(--tua-fw-bold);
    font-size: var(--tua-fs-xl);
    color: var(--tua-text-primary);
    margin-bottom: var(--tua-space-3);
}

form {
    background-color: var(--tua-bg-canvas);
    border: 1px solid var(--tua-border-subtle);
    border-radius: var(--tua-radius-xl);
    box-shadow: var(--tua-shadow-lg);
    padding: var(--tua-space-6);
    margin-bottom: var(--tua-space-6);
}

label {
    display: block;
    color: var(--tua-text-secondary);
    font-weight: var(--tua-fw-medium);
    margin-bottom: 0.4rem;
    font-size: var(--tua-fs-sm);
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--tua-border-default);
    border-radius: var(--tua-radius-md);
    font-size: var(--tua-fs-md);
    color: var(--tua-text-primary);
    background-color: var(--tua-bg-canvas);
    margin-bottom: var(--tua-space-3);
    transition: border-color var(--tua-transition-fast), box-shadow var(--tua-transition-fast);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    outline: none;
    border-color: var(--tua-brand-500);
    box-shadow: var(--tua-focus-ring);
}

button {
    width: 100%;
    border-radius: var(--tua-radius-md);
    padding: 0.7rem 1rem;
    font-weight: var(--tua-fw-semibold);
    font-size: var(--tua-fs-md);
    background: var(--tua-brand-600);
    color: #fff;
    border: 0;
    transition: background-color var(--tua-transition-fast), box-shadow var(--tua-transition-fast);
    cursor: pointer;
}
button:hover { background: var(--tua-brand-700); box-shadow: var(--tua-shadow-sm); }
button:active { transform: translateY(1px); }

#error {
    color: var(--tua-danger-600);
    margin-bottom: var(--tua-space-3);
    font-weight: var(--tua-fw-semibold);
    font-size: var(--tua-fs-sm);
}

@media (max-width: 480px) {
    form { padding: var(--tua-space-4); }
    button { padding: 0.6rem; font-size: var(--tua-fs-sm); }
    h1 { font-size: var(--tua-fs-2xl); }
    h2 { font-size: var(--tua-fs-lg); }
}