/* Concord — base visual das páginas renderizadas por PHP. * * O Concord tem DOIS front-ends no mesmo docroot: o app Next.js * (index.php → _app.html, _next/) e as páginas de PHP (login.php, work/*). * Até aqui os dois tinham identidades diferentes — o Next é Inter/Manrope, * roxo #4a32ff, superfície branca sobre página #fafbff; assets/app.css é o * "iOS 26 liquid glass": fonte do sistema, azul #0a84ff, degradê lavanda. * O Work carregava assets/app.css e por isso herdava a identidade ANTIGA, * que não é mais a identidade do produto. * * Este arquivo é a ponte. Ele traz para o lado PHP exatamente o que o Next * usa, LIDO DO BUILD DELE, não redigitado de memória: * * · as @font-face de Inter e Manrope, apontando para os MESMOS arquivos * .woff2 que o app Next já serve em _next/static/media/ — nada de CDN, * nada de segunda cópia da fonte; * · a paleta (--page/--surface/--border/--text-*/--primary/…), copiada de * _next/static/chunks/*.css; * · os raios e a escala de texto do Tailwind configurado lá. * * A invariante 8 de tests/js/estilo.test.js relê o CSS do build do Next e * compara com este arquivo: se um `next build` trocar o hash de um .woff2 * ou mexer num token da paleta, o teste aponta. Sem ela, o sintoma seria * mudo — a fonte cairia em Arial e a cor voltaria ao valor velho sem * ninguém ver. * * QUEM GOVERNA O TEMA. O app Next resolve `user_settings.appearance.theme` * ('system' | 'light' | 'dark') e põe/tira a classe `dark` no . As * páginas PHP leem o MESMO campo (concord_tema_do_usuario(), * inc/partials.php) e carimbam a mesma classe no servidor — sem piscada, e * sem duas fontes de verdade. Por isso os blocos de tema abaixo respondem * às três condições ao mesmo tempo: * * :root → claro * :root.dark, :root[data-theme="dark"] → escuro explícito * @media (prefers-color-scheme: dark) * :root[data-theme="auto"] → escuro por preferência do SO * * `.dark` é o que o Next escreve; `[data-theme]` é o que assets/app.js já * escrevia. Aceitar os dois é o que permite as duas metades do produto * concordarem enquanto a migração não termina. assets/work/tokens.css * repete estes três seletores palavra por palavra — a invariante 5 dos * testes compara os dois arquivos e falha se um mudar sem o outro. * * assets/app.css NÃO é tocado: login.php e as telas antigas continuam nele. */ /* ------------------------------------------------------------------ */ /* Fontes — geradas a partir de _next/static/chunks/*.css (invariante 8). */ /* ------------------------------------------------------------------ */ @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/2c55a0e60120577a-s.0-dom-5bn10r2.woff2)format("woff2"); unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2)format("woff2"); unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116 } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/ad66f9afd8947f86-s.3lvt2whj97whp.woff2)format("woff2"); unicode-range:U+1F?? } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/5476f68d60460930-s.2uwcyprjm3xu3.woff2)format("woff2"); unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2)format("woff2"); unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2)format("woff2"); unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(../_next/static/media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2)format("woff2"); unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD } @font-face { font-family:Inter Fallback; src:local(Arial); ascent-override:90.44%; descent-override:22.52%; line-gap-override:0.0%; size-adjust:107.12% } @font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../_next/static/media/a342834df7752944-s.3hd2l7bm32o7k.woff2)format("woff2"); unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F } @font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../_next/static/media/d3fe2f289711ac3f-s.1l2zhvq5eocqf.woff2)format("woff2"); unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116 } @font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../_next/static/media/58c4895d0a0ef7cc-s.2vhvl9vrvk-va.woff2)format("woff2"); unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF } @font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../_next/static/media/bfc7db5c00d21bc5-s.173xwsdme27n8.woff2)format("woff2"); unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB } @font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../_next/static/media/6ab0db14f70d8ed6-s.13hnt-xgp82zk.woff2)format("woff2"); unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF } @font-face { font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap; src:url(../_next/static/media/a343f882a40d2cc9-s.p.1sj6eobyi31rd.woff2)format("woff2"); unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD } @font-face { font-family:Manrope Fallback; src:local(Arial); ascent-override:103.31%; descent-override:29.07%; line-gap-override:0.0%; size-adjust:103.19% } /* ------------------------------------------------------------------ */ /* Paleta e escala — copiadas do build do Next (invariante 8). */ /* ------------------------------------------------------------------ */ :root { /* Tipografia. Inter é a fonte de INTERFACE; Manrope é a de EXIBIÇÃO (a marca, o número grande) — a mesma divisão que o app Next faz. Os dois "Fallback" existem por causa das métricas: o @font-face de fallback lá em cima ajusta ascent/descent/size-adjust do Arial para o texto não pular quando a webfont termina de carregar. */ --font-sans: "Inter", "Inter Fallback", system-ui, sans-serif; --font-display: "Manrope", "Manrope Fallback", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Escala de raio do Tailwind configurado no Next. */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); /* Sombra do botão primário — o roxo da marca sangrando por baixo. É a assinatura visual mais reconhecível do Concord; vive aqui como token para o Work não redigitar o rgba. */ --primary-sombra: 0 6px 20px rgba(74, 50, 255, .28); --primary-sombra-alta: 0 8px 25px rgba(74, 50, 255, .35); } /* CLARO. */ :root { /* `color-scheme` por tema, não um `light dark` fixo. ------------------------------------------------------------------ Ele governa o que o NAVEGADOR desenha e o CSS não alcança: a lista aberta de um , o relógio de um type=time, a barra de rolagem. Com o valor fixo em `light dark` o navegador decide por `prefers-color-scheme`, ou seja pelo sistema — e o tema aqui vem do BANCO. Quem tivesse o sistema no claro e o Concord no escuro abria o calendário da tela de Peça e recebia um painel branco no meio de uma tela preta. assets/app.css resolvia parte disso à mão, repintando `select option` num seletor de tema; declarar o color-scheme certo em cada bloco resolve a família inteira de controles de uma vez. */ color-scheme: light; --page: #fafbff; --surface: #ffffff; --text-primary: #080b1a; --text-secondary: #4a526b; --text-muted: #7a8298; --border: #e7eaf2; --gray-soft: #eef0f5; /* O roxo. --primary é o PREENCHIMENTO (botão sólido, marca) e --primary-ink o texto por cima dele; --primary-fg é o mesmo roxo usado como TEXTO ou ÍCONE sobre fundo claro ou sobre --primary-soft. ------------------------------------------------------------------ Os três existem porque o par do Next não sobrevive ao tema escuro. Lá o item de menu ativo é `bg-primary-soft text-primary`, ou seja #4a32ff escrito sobre #1e1a3d: medido, 2,51:1 — abaixo do mínimo de 4,5:1, e o mesmo defeito aparece sobre a superfície escura (2,79:1). O preenchimento não tem esse problema (branco sobre #4a32ff dá 6,58:1 nos dois temas), então --primary NÃO muda por tema; quem muda é --primary-fg, que no escuro sobe para o mesmo matiz 247° com menos saturação (5,96:1 sobre --primary-soft, 6,62:1 sobre --surface). Mesmo mecanismo dos pares -ink/-fg de assets/work/tokens.css, pelo mesmo motivo: contraste medido, não estimado. */ --primary: #4a32ff; --primary-ink: #ffffff; --primary-fg: #4a32ff; --primary-soft: #f0edff; --green: #22c55e; --green-soft: #e9fbef; /* O vermelho tem o mesmo par que o roxo, e pelo mesmo motivo. --danger é o PREENCHIMENTO (a cor cheia do Tailwind do Next, --color-red-600); --danger-fg é ele usado como TEXTO sobre uma faixa tingida do próprio matiz. Medido: #e40014 sobre a faixa clara (12% dele sobre branco, #fce0e3) dá 3,92:1 — abaixo do mínimo, e justamente no único texto da tela de login que a pessoa PRECISA ler. #cb0012 é o mesmo matiz (354,7°) um degrau mais escuro: 4,77:1. No escuro a faixa é escura e --danger já passa (5,60:1), então -fg repete o valor. */ --danger: #e40014; --danger-fg: #cb0012; /* Campos. */ --field-bg: var(--surface); --field-brd: var(--border); --field-brd-focus: var(--primary); /* ------------------------------------------------------------------ Apelidos do vocabulário antigo (assets/app.css). assets/work/work.css consome exatamente cinco nomes de fora do próprio Work — --accent, --accent-ink, --ease, --text, --text-2 e --text-3 — e trocar os cinco em 1880 linhas seria um diff enorme sem ganho nenhum de leitura. Os apelidos deixam esse arquivo intacto e mesmo assim mudam a cor: quem escreve `var(--text)` passa a receber o preto do Concord, e quem escreve `var(--accent)` passa a receber o roxo. Não há dois valores — há um valor com dois nomes. ------------------------------------------------------------------ */ --font: var(--font-sans); --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --accent: var(--primary); --accent-ink: var(--primary-ink); --accent-soft: var(--primary-soft); --bg-0: var(--page); --bg-1: var(--page); } /* ESCURO EXPLÍCITO — `.dark` é a classe que o app Next põe no ; `[data-theme="dark"]` é o que assets/app.js já escrevia. Os dois juntos, no mesmo seletor, é o que faz as duas metades do produto concordarem. assets/work/tokens.css repete este seletor palavra por palavra. */ :root.dark, :root[data-theme="dark"] { color-scheme: dark; --page: #0a0c12; --surface: #12141d; --text-primary: #ffffff; --text-secondary: #9fa6b8; --text-muted: #777f95; --border: #232736; --gray-soft: #1b1e29; --primary: #4a32ff; --primary-ink: #ffffff; --primary-fg: #9a8cff; --primary-soft: #1e1a3d; --green: #22c55e; --green-soft: #10281a; --danger: #ff6961; --danger-fg: #ff6961; --field-bg: var(--surface); --field-brd: var(--border); --field-brd-focus: var(--primary-fg); } /* ESCURO POR PREFERÊNCIA DO SISTEMA — só com data-theme="auto" explícito, que é o que inc/partials.php carimba quando a preferência gravada do usuário é 'system'. Atributo AUSENTE cai no claro, igual ao Next. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --page: #0a0c12; --surface: #12141d; --text-primary: #ffffff; --text-secondary: #9fa6b8; --text-muted: #777f95; --border: #232736; --gray-soft: #1b1e29; --primary: #4a32ff; --primary-ink: #ffffff; --primary-fg: #9a8cff; --primary-soft: #1e1a3d; --green: #22c55e; --green-soft: #10281a; --danger: #ff6961; --danger-fg: #ff6961; --field-bg: var(--surface); --field-brd: var(--border); --field-brd-focus: var(--primary-fg); } } /* ------------------------------------------------------------------ */ /* Base de elemento. */ /* ------------------------------------------------------------------ */ body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Controles herdam a fonte do documento — controle não herda `font` por conta própria, e sem isto o