/* =============================================================================
   Chess Courses — Authentication UI (US-002)
   Sign in / register / forgot / reset forms. Built entirely on the design
   tokens in assets/css/design-tokens.css — no hard-coded values.
   ============================================================================= */

.chess-auth {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
    padding: var(--space-16) var(--container-padding);
    background: var(--color-bg);
    font-family: var(--font-body);
    color: var(--color-text-body);
}

.chess-auth__card {
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
}

/* --- Tabs --------------------------------------------------------------- */
.chess-auth__tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    background: var(--color-surface-soft);
    border-radius: var(--radius-full);
    padding: var(--space-1);
}

.chess-auth__tab {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.chess-auth__tab.is-active {
    background: var(--color-surface);
    color: var(--color-primary-700);
    box-shadow: var(--shadow-sm);
}

/* --- Panels ------------------------------------------------------------- */
.chess-auth__panel[hidden] { display: none; }

.chess-auth__title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--letter-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.chess-auth__lead {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

/* --- Form fields -------------------------------------------------------- */
.chess-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.chess-auth__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-body);
}

.chess-auth__field input,
.chess-auth__field select {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

.chess-auth__field input:focus,
.chess-auth__field select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

.chess-auth__field input[readonly] {
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
}

.chess-auth__hint {
    font-weight: var(--font-weight-normal);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* --- Submit button ------------------------------------------------------ */
.chess-auth__submit {
    margin-top: var(--space-2);
    background: var(--color-primary-600);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-base);
    line-height: 1.25;
    border: 0;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}

.chess-auth__submit:hover {
    background: var(--color-primary-700);
    transform: translateY(-1px);
}

.chess-auth__submit:active {
    background: var(--color-primary-800);
    transform: translateY(0);
}

.chess-auth__submit:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.chess-auth__submit:disabled,
.chess-auth__submit.is-busy {
    background: var(--color-primary-200);
    cursor: not-allowed;
    transform: none;
}

/* --- Secondary links ---------------------------------------------------- */
.chess-auth__alt {
    text-align: center;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

.chess-auth__link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-primary-700);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    cursor: pointer;
}

.chess-auth__link:hover { color: var(--color-primary-800); }

/* --- Inline messages ---------------------------------------------------- */
.chess-auth__message {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.chess-auth__message[hidden] { display: none; }

.chess-auth__message.is-success {
    background: rgba(22, 163, 74, 0.10);
    color: #12703a;
    border: var(--border-width) solid rgba(22, 163, 74, 0.30);
}

.chess-auth__message.is-error {
    background: rgba(220, 38, 38, 0.08);
    color: #a41b1b;
    border: var(--border-width) solid rgba(220, 38, 38, 0.28);
}

.chess-auth__message.is-info {
    background: var(--color-surface-soft);
    color: var(--color-text-body);
    border: var(--border-width) solid var(--color-hairline);
}