/* ============================================================ ERPoint — Padrão visual (design tokens + base) Tema claro e escuro. Acento configurável via --accent. ============================================================ */ /* A ORDEM DAS CAMADAS — declarada aqui porque este arquivo carrega PRIMEIRO. `base` (o reset e os estilos de elemento, lá embaixo) fica ABAIXO da `legado` (style.css + components.css inteiros). Sem isso o reset `* { margin:0 }` fica FORA de camada e ganha de TODA regra em camada — foi o bug da t#1119: a centralização (.content-inner) e as margens da sidebar morreram no dia em que a legado nasceu (t#822). Regra de camada: fora-de-camada > legado > base. */ @layer base, legado; :root { /* Acento (sobrescrito por JS via data-accent) — o AZUL DE LINK/SELEÇÃO (D1). Era #3b82f6 e media 4,48 sobre a superfície escura — a um fio da régua de 4,5 do livrinho (regra 8); um degrau mais claro passa. O claro sobrescreve com o #2563eb decidido na D1. */ --accent: #4a8df7; --accent-600: #2f6fe0; --accent-soft: rgba(74, 141, 247, 0.14); --accent-ring: rgba(74, 141, 247, 0.35); /* ── A COR DE AÇÃO É A MARCA (a repintura única, D1 — 02/09) ───────────────── Botão de confirmar = DOURADO com letra NAVY-ESCURA (7,39 de contraste; branco daria 1,72 e é por isso que `--sobre-acao` é token, não um #fff digitado). O azul vira LINK/SELEÇÃO (`--accent`), nunca mais botão de ação. ⚠️ `--acao` NÃO segue o `--accent` de propósito: o acento é configurável (JS via data-accent), e a cor de ação é da MARCA — trocar o acento não pode desbotar o botão de confirmar. Quem garante o par dourado×navy é o W012 e os testes de `tarefas/tests_contraste.py`. */ --acao: var(--marca-dourado); --acao-forte: #D9A806; --sobre-acao: var(--marca-navy-escuro); --acao-halo: rgba(244, 190, 12, 0.30); /* ── OS 4 NOMES DA MARCA (D6, aprovada em 01/09 — t#840) ────────────────── Até aqui a marca vivia SÓ dentro do desenho do logo: nenhum token do sistema carregava uma cor dela. 📌 O CUSTO DE NÃO TER, medido na auditoria de 25/08: **32 tentativas de acertar o dourado de olho**, escritas à mão pelo projeto, e NENHUMA acertou o valor real. Quando o número certo não está à mão, as pessoas chutam — e cada chute vira uma cor nova pra alguém limpar depois. ⚠️ ELES NÃO MUDAM TELA NENHUMA SOZINHOS, e é assim de propósito: são NOMES, e quem os usa é a repintura única (testada no laboratório do login, e depois). Um token que ninguém usa ainda é vocabulário pronto, não é cor na tela. 🗣️ As quatro são dele, e o dourado com letra NAVY-ESCURA em cima é D1 (7,39 de contraste; branco daria 1,72 e seria ilegível). */ --marca-navy: #3A4660; --marca-navy-escuro: #2C3247; --marca-dourado: #F4BE0C; --marca-ceu: #86B8E6; /* ── CORES DE SIGNIFICADO (livrinho, regra 5 — repintura de 02/09) ────────── Uma palavra, uma cor: vermelho=atrasou · terracota=vence hoje/aviso · verde=deu certo · azul=link. O ÂMBAR MORREU (D2: 1,18 de contraste contra o dourado da ação — os dois viravam a mesma mancha). `--warn` e `--today` apontam pra MESMA terracota de propósito: aviso e vence-hoje são a mesma urgência; dois números divergindo aqui recriariam o "atrasado de duas cores" que a t#837 matou. ⚠️ Estes são os valores do tema ESCURO; o claro escurece cada um logo abaixo (W012: no claro, os valores do escuro caíam a 2,03–3,49 sobre o branco). */ --success: #2bb673; --success-soft: rgba(43, 182, 115, 0.14); --danger: #ef5350; --danger-soft: rgba(239, 83, 80, 0.13); --today: #e8590c; --today-soft: rgba(232, 89, 12, 0.15); --warn: #e8590c; --warn-soft: rgba(232, 89, 12, 0.15); /* Raios */ --r-xs: 6px; --r-sm: 8px; --r-md: 11px; --r-lg: 16px; --r-pill: 999px; /* Tipografia */ --font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Densidade (sobrescrita por JS) */ --row-pad: 14px; --rail-w: 248px; /* Sombras */ --shadow-sm: 0 1px 2px rgba(8, 15, 26, 0.18); --shadow-md: 0 6px 20px -6px rgba(8, 15, 26, 0.35); --shadow-lg: 0 18px 48px -12px rgba(8, 15, 26, 0.55); --tr: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* ── A FOLHA IMPRESSA (01/09) ────────────────────────────────────── 🗣️ "PDF pela impressão do navegador" (t#480). O papel é branco e a tinta é preta em QUALQUER tema — por isso estes quatro não têm versão clara/escura: eles não descrevem a tela, descrevem a folha. ⚠️ Eles moram AQUI e não no `manual.css` porque a regra 6 do livrinho vale igual dentro do `@media print`: toda cor vem de token, e o `tarefas.W005` conta cor escrita à mão em todo arquivo que não seja este. Quatro hex soltos num CSS de página seriam quatro cores fora do vocabulário, e a catraca subiria. */ --papel: #ffffff; --tinta: #111111; --tinta-forte: #000000; --papel-realce: #f4f4f4; } /* ---------- TEMA ESCURO (padrão) ---------- */ [data-theme="dark"] { --bg: #0b1320; --bg-grad: radial-gradient(1200px 600px at 78% -10%, #122036 0%, #0b1320 55%); --elev: #0f1a29; --surface: #13202f; --surface-2: #182838; --surface-hover: #1c2c3f; --border: #21344a; --border-soft: #182636; --border-strong: #2c405a; --text: #e9eff7; --text-2: #9db0c6; /* 🔴 t#835 — o terceiro degrau NÃO DAVA PRA LER. Era `#66798f`, e ele é usado em data, contador, rótulo, legenda e meta: **362 lugares**. As três direções da auditoria de 25/08 concordaram que isso é defeito, não gosto. 🗣️ D3, decidido 01/09: `#8ba0b6` — 6,12 sobre a superfície escura. ⚠️ O `--text` e o `--text-2` estão CERTOS e passam com folga nos dois temas. O problema começa só no terceiro degrau — não é o sistema inteiro. */ --text-3: #8ba0b6; --chip: #1a2a3c; --scrim: rgba(4, 9, 16, 0.6); /* --- Aliases de compat. para CSS legado --- */ --text-soft: var(--text-2); --text-muted: var(--text-3); --surface-soft: var(--surface-2); --accent-bg: var(--accent-soft); --accent-dark: var(--accent-600); --success-bg: var(--success-soft); --danger-bg: var(--danger-soft); --warn-bg: var(--warn-soft); } /* ---------- TEMA CLARO ---------- */ [data-theme="light"] { --bg: #eef1f6; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #ffffff 0%, #eef1f6 60%); --elev: #ffffff; --surface: #ffffff; --surface-2: #f5f7fb; --surface-hover: #eef2f8; --border: #e2e8f1; --border-soft: #edf1f6; --border-strong: #d3dbe6; --text: #101b29; /* 🗣️ D3 = B, FECHADA em 01/09 — a escada do tema claro ESCURECE INTEIRA. Ele pediu "mais preto" que o `#5f7186` que eu tinha proposto para o degrau 3. ⚠️ E aí a medição mostrou o limite: mais preto que `#55687e` (5,73) INVERTERIA a escada, porque o degrau 2 de então (`#54657a`) tinha 5,97 — o texto "menos importante" ficaria mais escuro que o "mais importante". Duas saídas foram à mesa; ele escolheu a (B), escurecer as duas juntas, que é a que atende o pedido SEM inverter a hierarquia. Recomendação e decisão coincidiram aqui. */ --text-2: #48596d; /* era #54657a · 7,18 sobre branco */ --text-3: #4f6175; /* era #8696a9 · 6,37 sobre branco */ --chip: #eef2f8; --scrim: rgba(20, 32, 48, 0.32); /* ── O TEMA CLARO ESCURECE AS CORES DE SIGNIFICADO (W012, repintura 02/09) ── Os valores do escuro caíam sobre o branco a 2,03 (aviso) · 2,61 (verde) · 3,49 (vermelho) · 2,69 (hoje). Cada um desce um degrau até passar de 4,5 — medido pelo W012 a cada `manage.py`, não a olho. O azul de link vira o #2563eb da D1. O halo da ação troca o dourado pelo navy (dourado sobre fundo claro não marca foco). */ --accent: #2563eb; --accent-600: #1d4fd7; --accent-soft: rgba(37, 99, 235, 0.12); --accent-ring: rgba(37, 99, 235, 0.30); --acao-halo: rgba(58, 70, 96, 0.22); --success: #1a7f4f; --success-soft: rgba(26, 127, 79, 0.13); --danger: #d13438; --danger-soft: rgba(209, 52, 56, 0.11); --today: #c2410c; --today-soft: rgba(194, 65, 12, 0.12); --warn: #c2410c; --warn-soft: rgba(194, 65, 12, 0.12); --shadow-sm: 0 1px 2px rgba(16, 27, 41, 0.06); --shadow-md: 0 8px 24px -10px rgba(16, 27, 41, 0.18); --shadow-lg: 0 24px 56px -16px rgba(16, 27, 41, 0.22); /* --- Aliases de compat. para CSS legado --- */ --text-soft: var(--text-2); --text-muted: var(--text-3); --surface-soft: var(--surface-2); --accent-bg: var(--accent-soft); --accent-dark: var(--accent-600); --success-bg: var(--success-soft); --danger-bg: var(--danger-soft); --warn-bg: var(--warn-soft); } /* Reset e elementos crus moram na camada MAIS BAIXA (`base`): eles são o chão, e qualquer classe — inclusive as da camada `legado` — tem que poder vencê-los. Fora de camada eles venciam TODO o legado (t#1119). */ @layer base { * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 15px; line-height: 1.4; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--accent-soft); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; } } .tnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---- Logo switching ---- */ .logo-wordmark, .logo-glyph { display: flex; align-items: center; } /* default dark: wordmark dark visible, light hidden; glyphs always hidden when expanded */ .app:not(.collapsed) .logo-glyph { display: none; } .app.collapsed .logo-wordmark { display: none; } .logo-wm-light, .logo-gl-light { display: none; } .logo-wm-dark, .logo-gl-dark { display: block; } [data-theme="light"] .logo-wm-dark { display: none; } [data-theme="light"] .logo-wm-light { display: block; } [data-theme="light"] .logo-gl-dark { display: none; } [data-theme="light"] .logo-gl-light { display: block; } /* ═══════════════════════════════════════════════════════════════════════════ AGUARDE — a barra que diz «estou processando». 29/09, pedido dele. 🗣️ *"quando clico no celular, a tela não dá nenhum sinal do que está acontecendo, parece que travou"*. A barrinha nativa do navegador é fina demais para alguém notar no telefone; esta tem 3px, cor de MARCA e fica colada no topo. ⚠️ Usa `--acao` (o dourado da marca) e NÃO o `--accent`: o acento é configurável pela pessoa, e um aviso de sistema que some quando alguém troca de cor não é aviso. Mesmo raciocínio do botão de confirmar. 🔴 A ANIMAÇÃO É INDETERMINADA de propósito — vai e volta, sem porcentagem. O servidor não diz quanto falta, e uma barra que enche até 90%% e trava mente pior do que uma que só diz «estou trabalhando». ═══════════════════════════════════════════════════════════════════════════ */ #aguarde-barra { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999; pointer-events: none; /* nunca rouba o clique de nada */ opacity: 0; transition: opacity .15s ease; background: linear-gradient(90deg, transparent, var(--acao, #F4BE0C), transparent); background-size: 40% 100%; background-repeat: no-repeat; } html.aguarde-ativo #aguarde-barra { opacity: 1; animation: aguarde-anda 1.1s ease-in-out infinite; } @keyframes aguarde-anda { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } /* ⚠️ Quem pediu menos movimento continua vendo o aviso — ele só para de andar. Sumir com a barra aqui deixaria justamente essa pessoa sem sinal nenhum. */ @media (prefers-reduced-motion: reduce) { html.aguarde-ativo #aguarde-barra { animation: none; background: var(--acao, #F4BE0C); } } /* ═══════════════════════════════════════════════════════════════════════════ VER COMO — a faixa e o seletor. 29/09, pedido dele. 🔴 A FAIXA É VISTOSA DE PROPÓSITO. Ela não é decoração: é o que impede a pessoa de esquecer que está com um papel vestido e vir relatar como defeito uma tela que está escondendo o que deve. Por isso fica no TOPO, ocupa a largura toda e não tem X. ═══════════════════════════════════════════════════════════════════════════ */ .ver-como-faixa { position: sticky; top: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; padding: .5rem 1rem; background: var(--acao, #F4BE0C); color: var(--sobre-acao, #10203a); font-size: .85rem; font-weight: 600; text-align: center; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); } .ver-como-faixa form { display: inline-flex; margin: 0; } .ver-como-faixa button { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: .15rem .7rem; font: inherit; cursor: pointer; } .ver-como-faixa button:hover { background: rgba(0, 0, 0, .12); } .ver-como-titulo { padding: .45rem .75rem .2rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; } .account-menu-sep { height: 1px; margin: .35rem .5rem; background: currentColor; opacity: .12; } /* O item do seletor é um `