/* Design tokens (diretrizes-ux-ui-multiplataforma §1.3): semantic colors, spacing scale
   4/8/12/16/24/32/48px, one radius, one shadow. The definitive component base for the product
   is a D1 decision; these tokens are the contract every screen builds on meanwhile. */
:root {
    color-scheme: light dark;
    --brand: #1f3a5f;
    --brand-contrast: #ffffff;
    --brand-accent: #b08d4f;
    --surface: #f5f6f8;
    --card: #ffffff;
    --text: #22272e;
    --muted: #5d6672;
    --border: #cbd2dc;
    --danger: #b3261e;
    --warning-bg: #fdf3d7;
    --warning-border: #e0c36b;
    --topbar-link: #d8e0ec;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius: 8px;
    --shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand: #16283f;
        --surface: #14171c;
        --card: #1e232b;
        --text: #e6e9ee;
        --muted: #9aa4b1;
        --border: #3a424e;
        --danger: #ff8a80;
        --warning-bg: #3a3320;
        --warning-border: #8a7433;
        --topbar-link: #c3cede;
        --shadow: 0 1px 3px rgb(0 0 0 / 40%);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--surface);
    color: var(--text);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--brand);
    color: var(--brand-contrast);
    padding: var(--space-2) var(--space-5);
}

.brand {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9rem;
}

.inline-form {
    display: inline;
}

.link-button {
    background: none;
    border: none;
    color: var(--topbar-link);
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
    /* Minimum effective click area on desktop/web: ~32px (diretrizes §1.2, Lei de Fitts). */
    padding: var(--space-2) var(--space-3);
    min-height: 32px;
}

.content {
    max-width: 60rem;
    margin: var(--space-6) auto;
    padding: 0 var(--space-4);
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-5) var(--space-6);
}

.login-card {
    max-width: 24rem;
    margin: var(--space-6) auto;
}

.card h1 {
    margin-top: 0;
    color: var(--brand);
}

@media (prefers-color-scheme: dark) {
    .card h1 {
        color: var(--text);
    }
}

.muted {
    color: var(--muted);
}

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
}

.facts dt {
    color: var(--muted);
}

.facts dd {
    margin: 0;
}

form label {
    display: block;
    margin: var(--space-4) 0 var(--space-1);
    font-size: 0.9rem;
}

form input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    background: var(--card);
    color: var(--text);
}

button.primary {
    margin-top: var(--space-5);
    width: 100%;
    padding: var(--space-3);
    background: var(--brand);
    color: var(--brand-contrast);
    border: none;
    border-radius: 6px;
    font: inherit;
    cursor: pointer;
    min-height: 40px;
}

button.primary:hover {
    filter: brightness(1.1);
}

button.primary:disabled {
    opacity: 0.7;
    cursor: progress;
}

.validation-summary {
    color: var(--danger);
    font-size: 0.9rem;
}

.validation-summary ul {
    margin: var(--space-2) 0;
    padding-left: 1.2rem;
}

/* Field-bound validation error (diretrizes §3.3): shown under its own input, not only in a
   generic summary at the top. */
.field-error {
    display: block;
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: var(--space-1);
    min-height: 1em;
}

.banner {
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.banner.warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
}