/* ═══════════════════════════════════════════════════════════════════════════ TEMA MARTHA'S — tokens partilhados pela frota v0.2.0 · 2026-09-04 ⚠ A v0.1.0 deste ficheiro inventou uma convenção de nomes própria e estava ERRADA. Em particular dava a `--parch` o significado oposto ao que a frota lhe dá, o que teria tornado o texto do rail invisível no entreposto. Esta versão adopta a convenção que já existe. Não inventa nada. FONTE CANÓNICA: `encomendas/public/index.html` (v0.53.0+, areia quente). É a app com a paleta mais completa — estados de workflow, severidade, identity colors — e por isso serve de referência. O `controlo-entreposto` diverge nalguns valores; ver «Divergências» no fim. A FROTA JÁ É CLARA. A pele base é areia quente. O que é escuro são zonas deliberadas — rail, aside, drawer, login — servidas pelos tokens da pele escura mais abaixo. Isto não é um kit para «converter para claro»; é para as três apps deixarem de manter três cópias da mesma paleta. COMO USAR 1. Ligar antes do CSS da app. 2. Usar var(--token). Nenhum hex literal no CSS da app. 3. Zonas escuras: pôr a classe `.mw-dark` no contentor — os tokens de superfície e tinta passam a resolver para a pele escura por cascata, sem tocar nos filhos. É a técnica que o entreposto já usa no `.modal` (v0.31.1), aqui generalizada e invertida. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Tipografia ── */ --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --serif:Georgia,"Times New Roman",serif; /* ── Raios e elevação ── */ --radius:10px; --radius-sm:6px; --radius-lg:14px; --shadow:0 1px 3px rgba(42,37,32,.07),0 1px 2px rgba(42,37,32,.04); --shadow-lg:0 28px 70px rgba(42,25,20,.28),0 6px 18px rgba(42,25,20,.12); /* ── PELE CLARA (base da frota) — areia quente Martha's ── Valores do `encomendas`. O entreposto usa --surface:#FBF9F4 e uma tinta mais suave; ver «Divergências». */ --bg: #F2EDE4; /* fundo da janela */ --surface: #FFFFFF; /* cartão, tabela, modal */ --surface-alt: #F5EFE3; /* zona secundária, linha alternada */ --border: #E6DCCB; --border-strong:#D7C9B2; --ink: #0B0907; /* texto principal · 18.9:1 sobre --surface */ --ink-2: #2A2520; /* texto forte · 14.3:1 */ --muted: #5A5147; /* texto secundário · 7.6:1 */ --muted-2: #7A7063; /* metadados · 4.8:1 */ /* ── Marca ── */ --wine:#8B1A2B; --wine-dark:#6F1422; --wine-deep:#3E1A22; --wine-black:#1A0A10; --wine-light:#FAECE7; --gold:#C8A96E; --gold-dark:#A6884E; --gold-light:#FAF4E6; --gold-bright:#E2C892; /* dourado claro — SÓ sobre fundo escuro */ /* O dourado da marca dá 1.9:1 sobre branco. Para texto dourado em fundo claro existe este tom, que passa: 5.4:1. Foi o entreposto que o resolveu. */ --gold-aa:#7A5D2B; /* Acento de texto — títulos, item de menu activo. Em zona clara é o vinho; `.mw-dark` troca-o pelo dourado claro. */ --accent:var(--wine); --on-accent:#FFFFFF; /* ── PELE ESCURA (rail, aside, drawer, login, cards wine) ── Nomes e valores do `controlo-entreposto`. `--parch` é TINTA CLARA SOBRE FUNDO ESCURO — não é o texto principal da app. */ --parch:#ECE3D2; /* texto sobre escuro · 13.6:1 */ --muted-dk:#B7A096; /* secundário sobre escuro · 8.1:1 */ --muted-dk-2:#D5BFA8; --hair:rgba(200,169,110,.22); --sunken:rgba(0,0,0,.22); /* caixa afundada dentro de zona escura */ --gradient-dark:linear-gradient(160deg,#1A0A10 0%,#2D1118 30%,#3E1A22 60%,#2A1520 100%); --editorial-gradient:radial-gradient(110% 88% at 50% 14%,#4a212a 0%,#2a1016 58%,#160a0e 100%); /* ── Estados semânticos ── Verde-musgo Douro, dourado envelhecido, azul institucional. Do encomendas. */ --success:#3F6212; --success-bg:#ECFCCB; --warn: #A6884E; --warn-bg: #FAF4E6; --info: #1F4068; --info-bg: #DBEAFE; --error: #B91C1C; --error-bg: #FEE2E2; /* ── Severidade (banners, chips de alerta) ── */ --sev-crit-bg:#FEE2E2; --sev-crit-fg:#B91C1C; --sev-warn-bg:#FEF3C7; --sev-warn-fg:#92400E; --sev-info-bg:#DBEAFE; --sev-info-fg:#1D4ED8; --sev-ok-bg: #DCFCE7; --sev-ok-fg: #15803D; /* ── Identity color por app ── */ --enc-blue:#0C447C; --enc-blue-dark:#093260; /* Encomendas */ /* PROPOSTA para o Portal de Contabilidade — verde-oliva escuro, para não colidir com o azul do encomendas nem com o vinho da marca. 8.1:1 sobre branco. Trocar se preferires outro. */ --ctb-olive:#3D4A22; --ctb-olive-dark:#2C3618; /* ── Acção primária (preto, não wine — decisão do encomendas) ── */ --primary:#18181B; --primary-hover:#27272A; color-scheme:light; } /* ═══════════ ZONA ESCURA ═══════════ Pôr `.mw-dark` num contentor (rail, aside, drawer, hero de login) e tudo lá dentro passa a resolver para a pele escura. É o inverso do que o entreposto faz no `.modal`, e pela mesma razão: em vez de caçar cada cor, redefinem-se os tokens no escopo e as custom properties herdam pela cascata. */ .mw-dark{ --bg:var(--wine-black); --surface:rgba(0,0,0,.25); --surface-alt:var(--sunken); --border:var(--hair); --border-strong:var(--gold-deep,rgba(200,169,110,.35)); --ink:var(--parch); --ink-2:var(--parch); --muted:var(--muted-dk); --muted-2:var(--muted-dk); --accent:var(--gold-bright); --shadow:none; --shadow-lg:0 30px 80px rgba(0,0,0,.6); /* estados: sobre escuro os tons saturados escuros desaparecem */ --success:#7CD389; --success-bg:rgba(124,211,137,.14); --warn: #F5C363; --warn-bg: rgba(245,195,99,.12); --error: #E7867A; --error-bg: rgba(231,134,122,.14); background:var(--wine-black); color:var(--parch); color-scheme:dark; } /* ═══════════ PRIMITIVAS ═══════════ Opcionais. Uma app pode usar só os tokens acima. Todas funcionam dentro de `.mw-dark` sem alteração — é esse o teste de que os tokens estão certos. */ .mw-btn{background:var(--wine);border:1px solid var(--wine);color:var(--on-accent); border-radius:var(--radius-sm);padding:5px 12px;font:inherit;font-size:11.5px; font-weight:600;cursor:pointer} .mw-btn:hover{background:var(--wine-dark)} .mw-btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--muted); border-radius:var(--radius-sm);padding:5px 12px;font:inherit;font-size:11.5px;cursor:pointer} .mw-btn-ghost:hover{background:var(--surface-alt);border-color:var(--border-strong);color:var(--ink)} .mw-input{background:var(--surface);border:1px solid var(--border);color:var(--ink); padding:6px 10px;border-radius:var(--radius-sm);font:inherit;font-size:12px} .mw-input:focus{outline:2px solid color-mix(in srgb, var(--wine) 40%, transparent); outline-offset:1px;border-color:var(--wine)} .mw-table{width:100%;border-collapse:collapse;font-size:12px} .mw-table th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--gold-aa);background:var(--surface-alt);font-weight:700; padding:9px 10px;border-bottom:1px solid var(--border-strong)} .mw-dark .mw-table th{color:var(--gold-deep,#A8854A)} .mw-table td{padding:8px 10px;border-bottom:1px solid var(--border)} .mw-table tbody tr:hover td{background:var(--surface-alt)} .mw-table tfoot td{border-top:2px solid var(--border-strong);border-bottom:none; background:var(--surface-alt);font-weight:700;color:var(--ink)} /* tabular-nums: sem isto os dígitos mudam de largura e a coluna «dança» ao filtrar. Numa tabela que se confere ao cêntimo, isso custa. */ .mw-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .mw-pill{display:inline-block;padding:2px 8px;border-radius:9px;font-size:10px; font-weight:600;letter-spacing:.04em;border:1px solid transparent} .mw-pill-ok{background:var(--sev-ok-bg);color:var(--sev-ok-fg)} .mw-pill-warn{background:var(--sev-warn-bg);color:var(--sev-warn-fg)} .mw-pill-alert{background:var(--sev-crit-bg);color:var(--sev-crit-fg)} .mw-pill-mut{background:var(--surface-alt);color:var(--muted);border-color:var(--border)} .mw-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:12px 14px;box-shadow:var(--shadow)} .mw-card:hover{background:var(--surface-alt);border-color:var(--border-strong)} .mw-h1{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.04em;color:var(--accent);margin:0} .mw-h2{font-family:var(--serif);font-size:14.5px;font-weight:400;letter-spacing:.05em;color:var(--accent);margin:0} .mw-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-aa);font-weight:600} .mw-dark .mw-label{color:var(--gold-deep,#A8854A)} @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} } /* ═══════════════════════════════════════════════════════════════════════════ DIVERGÊNCIAS A RECONCILIAR Este ficheiro adopta os valores do `encomendas`. Ligá-lo ao entreposto MUDA ligeiramente o aspecto nos pontos abaixo. Nenhum é uma regressão de contraste — todos sobem — mas é mudança visual e precisa de sign-off. token encomendas entreposto efeito no entreposto --surface #FFFFFF #FBF9F4 cartões ficam brancos, não creme --ink #0B0907 #2A2520 texto principal mais preto --ink-2 #2A2520 #403831 texto forte mais escuro --muted #5A5147 #6E6557 secundário mais escuro (7.6:1 vs 5.9:1) --muted-2 #7A7063 #9C907E metadados passam a cumprir 4.5:1 --wine-dark #6F1422 #6B1220 imperceptível --gold-dark/deep #A6884E #A8854A imperceptível Estados: o entreposto usa --ok-fg/--warn-fg/--err-fg/--info-fg; este kit usa --success/--warn/--error/--info. Os valores também diferem (o entreposto tem --ok-fg:#15803D, o encomendas --success:#3F6212, verde-musgo). Migrar exige escolher um — não é substituição mecânica. Deixado por decidir. RECOMENDAÇÃO: ligar primeiro ao Portal de Contabilidade, que nasce de raiz e não tem nada a reconciliar. Só depois, e sem pressa, às duas apps em produção. ═══════════════════════════════════════════════════════════════════════════ */