:root {
    --brand: #0d9488;
    --brand-dark: #0f766e;
    --surface: #f8fafc;
}

body {
    background: radial-gradient(circle at 10% -20%, rgba(45, 212, 191, 0.2), transparent 35%),
        radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.15), transparent 35%),
        var(--surface);
}

.reveal {
    animation: reveal 280ms ease-out;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-tab {
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.auth-tab:hover {
    transform: translateY(-1px);
}

.auth-tab:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.auth-tab-active {
    background-color: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.auth-tab-inactive {
    color: #64748b;
}