/* Chrome for the django-allauth pages, linked from templates/allauth/layouts/base.html.
   Tokens mirror templates/account/login.html, which these pages are reached from. */

:root {
    --surface: #faf9f6;
    --surface-container-low: #f7f5f0;
    --on-surface: #1a1918;
    --on-surface-variant: #524f4a;
    --outline: #858076;
    --outline-variant: #d6d1c6;
    --primary: #1a1918;
    --on-primary: #f5f2ed;
    --tertiary: #9c7836;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: var(--surface);
    color: var(--on-surface);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--on-surface);
    outline-offset: 2px;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    background: #fff;
    border: 1px solid var(--outline-variant);
    border-radius: 8px;
    padding: 2.5rem;
}

.auth-logo {
    display: inline-block;
    margin-bottom: 2rem;
}

.auth-logo img {
    height: 1.75rem;
    width: auto;
    display: block;
}

.auth-heading {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

.auth-subheading {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
}

.auth-text {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.auth-text a {
    color: var(--on-surface);
    text-decoration: underline;
}

.auth-messages,
.auth-alert {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--tertiary);
    background: var(--surface-container-low);
    font-size: 0.875rem;
    line-height: 1.5;
}

.auth-form {
    margin-bottom: 1.75rem;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--outline);
    border-radius: 6px;
    background: #fff;
    color: var(--on-surface);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}

.auth-btn:hover {
    background: var(--surface-container-low);
}

.auth-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.auth-btn--primary:hover {
    background: #302e2b;
}

.auth-field {
    margin: 0 0 1.25rem;
}

.auth-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.auth-field input:not([type="checkbox"]):not([type="radio"]),
.auth-field textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--outline);
    border-radius: 6px;
    background: #fff;
    color: var(--on-surface);
    font-family: inherit;
    font-size: 0.875rem;
}

.auth-field:has(input[type="radio"]),
.auth-field:has(input[type="checkbox"]) {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.auth-field:has(input[type="radio"]) label,
.auth-field:has(input[type="checkbox"]) label {
    display: inline;
    font-weight: 400;
    margin-bottom: 0;
}

.auth-field-help {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.auth-providers {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-providers a {
    display: inline-block;
    padding: 0.25rem 0;
    color: var(--on-surface);
    font-size: 0.875rem;
    text-decoration: underline;
}