/* CHROME: login, register, lupa password.
 * Extracted verbatim from themes/default/index.html — 100% identical across all
 * 7 themes today. `.eco-auth-notice` moved here from GENERAL since it's only ever
 * used on auth pages; the button it references (`.btn`) and the input styling
 * inside login/register forms stay theme-owned (Layer 2 "Form control").
 *
 * This chunk is compiled standalone (see resources/css/chrome/_tokens.css's own
 * header comment) so it keeps its own copy of every plain Tailwind design token
 * its rules below actually use — only what's referenced via var(), nothing more.
 */
:root {
    --color-foreground: #17140f;
    --spacing: 0.25rem;
    --container-lg: 32rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}
@layer chrome {
    .eco-auth-notice {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing) * 2);
        border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
        padding: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
    }
    .eco-auth-notice-title {
        font-weight: var(--font-weight-semibold);
    }

    [data-page="login"],
    [data-page="register"],
    [data-page="password-request"] {
        .title {
            margin-top: calc(var(--spacing) * 20);
        }
        .subtitle {
            margin-top: calc(var(--spacing) * 1);
        }
        [data-role="login-form"],
        [data-role="register-form"],
        [data-role="forgot-form"] {
            max-width: var(--container-lg);
            margin-inline: auto;
            border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
            padding: calc(var(--spacing) * 5);
            margin-top: calc(var(--spacing) * 8);
            margin-bottom: calc(var(--spacing) * 34);
            .btn {
                width: 100%;
                margin-top: calc(var(--spacing) * 4);
            }
            .eco-auth-footer {
                text-align: center;
                margin-top: calc(var(--spacing) * 3);
            }
            a {
                font-weight: var(--font-weight-medium);
            }
        }
    }
}