/* 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;
--brand: #1f3a5f;
--brand-contrast: #ffffff;
/* --brand doubles as the topbar background, so it must go *darker* in dark mode while text
accents must go *lighter*. --brand-text is the accent-on-surface role: links, focus rings
and emphasis that have to clear WCAG AA contrast (diretrizes §1.6) in both themes. */
--brand-text: #1f3a5f;
--brand-accent: #b08d4f;
--surface: #f5f6f8;
--card: #ffffff;
--text: #22272e;
--muted: #5d6672;
--border: #cbd2dc;
--danger: #b3261e;
--warning-bg: #fdf3d7;
--warning-border: #e0c36b;
--overdue-bg: #fbe1df;
--overdue-border: #c94b3f;
--topbar-link: #d8e0ec;
--diff-added: #2e7d32;
--diff-removed: #c62828;
/* conformidade-visual-prototipo-redesign, Requisito 56: fundo de baixa opacidade (mesma técnica
alpha de --sidebar-active-bg) para o círculo de ícone de confirmação em Verify/Index. */
--diff-added-bg: rgb(46 125 50 / 12%);
--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%);
--sidebar-active-bg: rgb(31 58 95 / 8%);
}
/* Escuro é opt-in via alternância manual (theme-toggle.js seta data-theme no ), nunca
automático pelo SO — claro é o padrão do produto independente de prefers-color-scheme. */
:root[data-theme="dark"] {
color-scheme: dark;
--brand: #16283f;
--brand-text: #9dc0ea;
--surface: #14171c;
--card: #1e232b;
--text: #e6e9ee;
--muted: #9aa4b1;
--border: #3a424e;
--danger: #ff8a80;
--warning-bg: #3a3320;
--warning-border: #8a7433;
--overdue-bg: #3d1f1c;
--overdue-border: #e08277;
--topbar-link: #c3cede;
--diff-added: #6dbb70;
--diff-removed: #ff8a80;
--diff-added-bg: rgb(109 187 112 / 18%);
--shadow: 0 1px 3px rgb(0 0 0 / 40%);
--sidebar-active-bg: rgb(157 192 234 / 14%);
}
* {
box-sizing: border-box;
}
/* conformidade-visual-prototipo-redesign, Requisito 57: único do produto (Verify/Index) usava o
estilo "inset" padrão do navegador, sem tratamento de dark mode. */
hr {
border: none;
border-top: 1px solid var(--border);
margin: var(--space-4) 0;
}
body {
margin: 0;
font-family: "Segoe UI", system-ui, sans-serif;
background: var(--surface);
color: var(--text);
}
/* TODO item 261: without wrapping, the links of a signed-in topbar made a 390 px page 1,089 px wide. */
.topbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
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;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: var(--space-3);
font-size: 0.9rem;
}
.inline-form {
display: inline;
}
/* navegacao-lateral-persistente, achado 3: toggle de tema com ícone de linha (sem emoji) —
pill bordeada sobre o fundo escuro da topbar, mesmo desenho do protótipo. */
.theme-toggle {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
background: none;
border: 1px solid rgb(255 255 255 / 35%);
color: var(--topbar-link);
border-radius: 999px;
padding: 6px var(--space-3);
font: inherit;
font-size: 0.8rem;
cursor: pointer;
min-height: 32px;
}
.theme-toggle:focus-visible {
outline: 2px solid var(--brand-text);
outline-offset: 2px;
}
/* --topbar-link (~1.3:1 on a light surface) is a light-on-dark accent designed for the dark topbar/
.undo-toast backgrounds only — every other surface needs the contextual override below. */
.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;
}
/* conformidade-visual-prototipo-redesign, Requisito 3: .link-button on a light surface (.card or any
.banner, including the "Tentar novamente" retry button inside .banner.warning) needs a dark-on-light
accent instead of --topbar-link. var(--brand-text) already clears WCAG AA (≥4.5:1) against .card and
.banner.warning in both themes — verified: light ~11.5:1/~10.4:1, dark ~8.4:1/~6.7:1. Does not affect
.undo-toast .link-button (disjoint context, preserved below) nor .move-buttons button (higher
specificity already overrides via `color: inherit`). */
.card .link-button,
.banner .link-button {
color: var(--brand-text);
}
/* margin horizontal 0 (não auto): .content é item de um flex container coluna (.app-shell-main) —
margem auto nas laterais anula align-items:stretch (a especificação de flexbox dá prioridade à
margem automática sobre o stretch), fazendo o elemento encolher para o tamanho do conteúdo em
vez de ocupar a largura disponível, mesmo sem max-width. */
.content {
margin: var(--space-6) 0;
padding: 0 var(--space-4);
}
/* .content deixou de ter max-width fixo (60rem) para grades/tabelas/dashboards aproveitarem toda
a largura da tela. Texto corrido e formulários verticais (rótulo empilhado sobre campo — ver
"form label"/"form input" abaixo) continuam com uma largura confortável de leitura: um