/* The login page does not load index.css: these tokens repeat the app palette (index.css :root); the form is a
   message-coloured card in the light theme. It follows the theme picked in the app, else the OS. */
:root {
    --font-family-main: "Figtree", "Rubik", Arial, Helvetica, sans-serif;
    --color-background: #191613;
    --color-panel: #201c18;
    --color-input: #191613;
    --color-border: #4a4037a8;
    --color-text: #f3ebdf;
    --color-text-muted: #cdbfab;
    --color-error-text: #f06a5a;
    --color-highlight: #d9774c;
    --color-action: #a94f2a;
    --color-action-hover: #8f4122;
    --color-on-action: #ffffff;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

/* login.html sets data-theme when a theme was picked in the app; with System (and without JavaScript)
   the media query follows the OS, also when it changes while the page is open. */
:root[data-theme="light"] {
    --color-background: #fbf9f5;
    --color-panel: #ffffff;
    --color-input: #ffffff;
    --color-border: #d6cec1;
    --color-text: #2f2a24;
    --color-text-muted: #655b50;
    --color-error-text: #920000;
    --color-highlight: #8f4122;
    --shadow: 0 10px 25px rgba(90, 60, 30, 0.12);
    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --color-background: #fbf9f5;
        --color-panel: #ffffff;
        --color-input: #ffffff;
        --color-border: #d6cec1;
        --color-text: #2f2a24;
        --color-text-muted: #655b50;
        --color-error-text: #920000;
        --color-highlight: #8f4122;
        --shadow: 0 10px 25px rgba(90, 60, 30, 0.12);
        color-scheme: light;
    }
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

button,
input {
    font-family: var(--font-family-main);
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.login-form {
    background-color: var(--color-panel);
    padding: 2rem;
    border-radius: 1.125rem;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-sizing: border-box;
}

.logo {
    display: block;
    width: min(40vw, 9rem);
    height: auto;
    margin: 0 auto;
}

.login-title {
    margin: 0 0 2rem;
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.input-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
}

.input-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-input);
    color: var(--color-text);
    font-size: 1rem;
    box-sizing: border-box; /* Added for consistent padding */
}

.input-group input:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
}

button {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--color-action);
    color: var(--color-on-action);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--color-action-hover);
}

.error {
    color: var(--color-error-text);
    margin-top: 1rem;
}

/* Why this browser has to sign in again: information, not an error. */
.notice {
    color: var(--color-text);
}

/* Under the button while a slowed-down sign-in waits for its check. */
.wait-note {
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

button:disabled {
    cursor: progress;
    background-color: var(--color-action-hover);
}

@media (max-width: 480px) {
    .login-form {
        padding: 1.5rem;
    }
}