/* ========================================================================== ALUMOTOS — DESIGN TOKENS (FONTE ÚNICA DE VERDADE) ========================================================================== Carregado por include_styles.php imediatamente DEPOIS do style.css. Regras de uso (ver guia_design.php → "Obrigatórios"): 1. CORES NASCEM AQUI. Página NÃO redefine token nem usa hex hardcoded em CSS próprio — sempre var(--token). Precisa de uma cor nova? Adicione o token AQUI (e documente no guia), nunca inline na página. 2. COMPONENTES CANÔNICOS usam o prefixo .am- (collision-free com o style.css legado). Use-os direto no markup, sem copiar CSS. 3. CSS específico de página deve ser ESCOPADO numa classe no (ex.: body.multas-page .minha-coisa { ... }) — nunca estilizar .btn/.modal-content/table/input "soltos" (colide com o style.css). 4. Manual: _MANUAL_DESIGN_SYSTEM_ALUMOTOS.txt (6.3/6.4/7.x). PROIBIDO: glow (box-shadow colorido), glass (backdrop-filter), gradiente em botões, verde como hover/fundo dominante. ========================================================================== */ :root, html[data-theme="dark"] { color-scheme: dark; /* ---- Superfícies ---- */ --bg: #0f0f0f; /* fundo da página */ --panel: #181818; /* painel principal / topbar / modal */ --panel-2: #141414; /* wrapper de tabela / sub-painel */ --code-bg: #141414; /* inputs, blocos de código */ --th: #1a1a1a; /* cabeçalho de tabela (th) */ --row-hover: #252525; /* hover de linha — CINZA, nunca verde */ /* Surface-2 (chrome): cards, chips, badges, botões 2ários, abas */ --surface-2: #1e1e1e; --surface-2-hover: #282828; /* ---- Bordas (translúcidas — preservam profundidade entre superfícies) ---- */ --line: rgba(255, 255, 255, 0.07); --line-soft: rgba(255, 255, 255, 0.14); /* ---- Texto ---- */ --text: #f0f0f0; /* Legibilidade (revisão 2026-08-22): os dois tons "apagados" subiram para passar em AA (>=4.5:1) na PIOR superfície do dark, que é o card legado #292929 — antes --muted (#737373) dava só 3.5:1 e sumia. Hierarquia preservada: --text > --muted-sub (corpo/2ário) > --muted (labels/meta). */ --muted: #9b9b9b; /* labels, meta, th, placeholders — 5.2:1 sobre #292929 */ --muted-sub: #c8c8c8; /* corpo secundário / subtítulo — 8.7:1 sobre #292929 */ --heading: #ffffff; /* ---- Aliases legados (nomes usados em várias páginas antigas, nunca definidos antes — sempre caíam no fallback hex individual de cada var(). Alias puro: resolve nos dois temas automaticamente, sem precisar redeclarar no bloco light. ---- */ --card-background: var(--surface-2); --text-color-light: var(--muted-sub); /* ---- Marca (verde) ---- */ --brand: #22c55e; --brand-text: #22c55e; /* verde para TEXTO/ícone sobre Surface-2 */ --brand-hover: #16a34a; --brand-pressed: #15803d; /* ---- Semânticas (cor vai no TEXTO; fundo é var(--*-dim)) ---- */ --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* ---- Superfícies tintadas (badges, estados, cards de alerta) ---- */ --green-dim: rgba(34, 197, 94, 0.12); --red-dim: rgba(239, 68, 68, 0.10); --amber-dim: rgba(245, 158, 11, 0.12); --blue-dim: rgba(59, 130, 246, 0.12); /* ---- Escala tipográfica ---- */ --font-xs: 11px; /* labels uppercase, badges, ícone legenda */ --font-sm: 12px; /* texto de tabela, chips, btn--sm */ --font-base: 13px; /* UI geral: abas, selects, botões, tooltips */ --font-md: 15px; /* nome de logo, títulos de topbar */ /* ---- Escala de espaçamento ---- */ --sp-1: 4px; /* gap mínimo: chips, abas, ícone+label */ --sp-2: 8px; /* gap interno de botão */ --sp-3: 10px; /* gap entre cards num grid */ --sp-4: 12px; /* padding horizontal de card compacto */ --sp-5: 14px; /* padding vertical de card / topbar */ --sp-6: 16px; /* gap entre seções menores / padding card padrão */ --sp-7: 18px; /* padding horizontal de card padrão / coluna de tabela */ --sp-8: 20px; /* gap entre seções principais / padding de conteúdo vertical */ --sp-9: 24px; /* padding de conteúdo horizontal / modal */ /* ---- Geometria ---- */ --radius-card: 10px; --radius-btn: 6px; --radius-modal: 14px; --shadow-modal: 0 24px 60px rgba(0, 0, 0, .6); } /* ========================================================================== COMPONENTES CANÔNICOS (.am-*) — manual 7.x ========================================================================== */ /* ---- Painel (7.5) ---- */ .am-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-6) var(--sp-7); } /* ---- Botões (7.1) ---- */ .am-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-btn); font-weight: 500; font-size: var(--font-base); cursor: pointer; text-decoration: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted-sub); transition: background .15s, color .15s, border-color .15s; } .am-btn:hover { background: var(--surface-2-hover); color: var(--text); } .am-btn--sm { padding: 5px var(--sp-3); font-size: var(--font-sm); gap: 5px; } .am-btn--primary { background: var(--brand); border-color: var(--brand); color: #ffffff; font-weight: 600; } .am-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #ffffff; } .am-btn--primary:active { background: var(--brand-pressed); } .am-btn--danger { color: var(--error); } .am-btn--danger-solid { background: var(--error); border-color: var(--error); color: #fff; } .am-btn--danger-solid:hover { background: #dc2626; border-color: #dc2626; } .am-btn:disabled, .am-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* ---- Badges / status (6.4 / 7.6) ---- */ .am-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--sp-2); border-radius: 4px; font-size: var(--font-xs); font-weight: 500; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); } .am-badge--success { background: var(--green-dim); color: var(--success); border-color: transparent; } .am-badge--warning { background: var(--amber-dim); color: var(--warning); border-color: transparent; } .am-badge--error { background: var(--red-dim); color: var(--error); border-color: transparent; } .am-badge--info { background: var(--blue-dim); color: var(--info); border-color: transparent; } .am-badge--brand { background: var(--green-dim); color: var(--brand-text); border-color: transparent; } /* contador/notificação = vermelho sólido */ .am-badge--count { background: var(--error); border-color: var(--error); color: #fff; border-radius: 999px; } /* ---- Chip (filtro, período, tag) ---- */ .am-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-btn); font-size: var(--font-sm); font-weight: 400; background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .am-chip:hover { background: var(--surface-2); color: var(--muted-sub); } .am-chip.active, .am-chip--active { background: var(--brand); border-color: var(--brand); color: #0f0f0f; font-weight: 500; } /* ---- Pílula de assinatura digital (.sign-pill) ---- Estado da assinatura de um contrato/vistoria: "Assinado 2/2", "Parcial 1/2", "Pendente 0/2". Padrão surface-2: fundo chapado + borda, cor só no texto. Base global (card #553) para as telas que passaram a exibir o selo sem ter CSS próprio (ver_moto, ver_locatario). As páginas que já declaravam a sua versão (contratos.php, listar_vistorias.php, ver_locacao.php) continuam vencendo pela ordem de carga — o