/* ══════════════════════════════════════════════════════════════════════════ PadocaLab — sistema de temas ══════════════════════════════════════════════════════════════════════════ DOIS EIXOS ORTOGONAIS, que nunca declaram a mesma propriedade: eixo TEMA (identidade) escreve só --t--l e --t--d eixo MODO (claro/escuro) escreve só os PAPÉIS (--bg, --primary, …), sempre como var(--t-X-l) ou var(--t-X-d) Como os conjuntos de nomes são disjuntos, os dois eixos jamais competem na cascata: NÃO EXISTE seletor [data-tema=X][data-theme=dark] neste arquivo. São 5 blocos de tema + 3 de resolução = 8 blocos para 20 combinações. há override da empresa ORDEM DOS BLOCOS — a única dependência de ordem do arquivo: 1. :root .................. (0,1,0) tokens neutros + paleta do intralab 2. :root[data-tema="…"] ... (0,2,0) as 5 paletas 3. :root .................. (0,1,0) resolução CLARA 4. @media dark :root ...... (0,1,0) resolução ESCURA automática 5. :root[data-theme="…"] .. (0,2,0) resolução EXPLÍCITA 6. #tema-org (injetado) ... (0,3,0) override da empresa, só --t-* O item 4 empata em especificidade com o 3 (@media NÃO soma especificidade) e só vence por ORDEM DE ORIGEM. Por isso o bloco 4 tem que vir depois do 3. Mexer nessa ordem quebra o modo escuro automático em silêncio. O item 1 declara a paleta completa do intralab de propósito: um --t-* ausente faria var() computar para o guaranteed-invalid value e o papel herdaria do pai — falha silenciosa e difícil de achar. Assim nenhum nome pode faltar, e a tela de login (que não sabe a empresa) renderiza certa sem atributo nenhum. Regras de conteúdo: - --success/--warning/--error são do eixo MODO, não do tema: verde precisa parecer verde nas cinco identidades. - --on-primary é token por modo, não a constante #fff. Modo claro = primary escuro + texto branco; modo escuro = primary claro + tinta escura. - Todo par crítico passa WCAG AA (≥4.5:1); texto/fundo passa AAA (≥7:1). Verificado por scripts/testes/contraste.test.js, que roda no npm run teste. ══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1. BASE — tokens neutros + paleta padrão (intralab) ═══════════════════ */ :root { /* ── Tipografia ── */ --font: 'DM Sans', system-ui, -apple-system, sans-serif; /* Fonte da MARCA (wordmark do menu e da tela de entrada), não do texto. Um tema pode trocá-la; o resto do app fica na DM Sans em todos eles — duas famílias de texto na mesma tela mudam a métrica ao trocar de tema. */ --font-display: var(--font); --font-mono: 'Space Mono', 'JetBrains Mono', monospace; --text-xs: .75rem; --text-sm: .875rem; --text-base: .95rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.8rem; /* ── Espaço, forma, movimento ── */ --radius-sm: 8px; --radius: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; --sidebar-w: 244px; --topbar-h: 58px; --bottom-nav-h: 58px; --ease: cubic-bezier(.4, 0, .2, 1); --transition: .25s var(--ease); /* ── Paleta padrão: intralab ── */ --t-bg-l: #f3f8fd; --t-surface-l: #ffffff; --t-surface-2-l: #f8fafc; --t-surface-3-l: #f1f5f9; --t-border-l: #e2e8f0; --t-border-strong-l: #cbd5e1; --t-text-l: #1e293b; --t-text-soft-l: #55637a; --t-text-faint-l: #626f85; --t-heading-l: #1a3a5c; --t-primary-l: #2d6ca3; --t-primary-rgb-l: 45 108 163; --t-on-primary-l: #ffffff; --t-primary-forte-l: #1a3a5c; --t-on-primary-forte-l: #ffffff; --t-accent-l: #00b4d8; --t-accent-soft-l: #e8f2fb; --t-sidebar-bg-l: #12283f; --t-sidebar-text-l: #cfe0f0; --t-sidebar-muted-l: #93adc6; --t-sidebar-accent-l: #6aafe0; --t-sidebar-active-l: rgb(74 144 196 / .22); --t-sidebar-active-text-l: #ffffff; --t-sombra-rgb-l: 26 58 92; --t-sombra-a-l: .08; --t-bg-d: #0e1622; --t-surface-d: #16202e; --t-surface-2-d: #1b2736; --t-surface-3-d: #22303f; --t-border-d: #263442; --t-border-strong-d: #33475a; --t-text-d: #e6edf5; --t-text-soft-d: #9fb0c2; --t-text-faint-d: #8598ab; --t-heading-d: #dbe7f3; --t-primary-d: #6aafe0; --t-primary-rgb-d: 106 175 224; --t-on-primary-d: #08131f; --t-primary-forte-d: #24405e; --t-on-primary-forte-d: #ffffff; --t-accent-d: #22d3ee; --t-accent-soft-d: rgb(74 144 196 / .18); --t-sidebar-bg-d: #0b1420; --t-sidebar-text-d: #cfe0f0; --t-sidebar-muted-d: #8499ae; --t-sidebar-accent-d: #6aafe0; --t-sidebar-active-d: rgb(74 144 196 / .30); --t-sidebar-active-text-d: #ffffff; --t-sombra-rgb-d: 0 0 0; --t-sombra-a-d: .42; } /* ═══ 2. AS CINCO PALETAS — só escrevem --t-*, nunca papéis ═════════════════ */ /* ── intralab — o azul da casa: técnico, calmo, sem opinião sobre o negócio do cliente. #4a90c4 continua sendo a cor DA MARCA (o arco do símbolo), mas deixou de ser --primary no claro: branco em cima dá 3.46:1. ── */ :root[data-tema="intralab"] { --t-bg-l: #f3f8fd; --t-surface-l: #ffffff; --t-surface-2-l: #f8fafc; --t-surface-3-l: #f1f5f9; --t-border-l: #e2e8f0; --t-border-strong-l: #cbd5e1; --t-text-l: #1e293b; --t-text-soft-l: #55637a; --t-text-faint-l: #626f85; --t-heading-l: #1a3a5c; --t-primary-l: #2d6ca3; --t-primary-rgb-l: 45 108 163; --t-on-primary-l: #ffffff; --t-primary-forte-l: #1a3a5c; --t-on-primary-forte-l: #ffffff; --t-accent-l: #00b4d8; --t-accent-soft-l: #e8f2fb; --t-sidebar-bg-l: #12283f; --t-sidebar-text-l: #cfe0f0; --t-sidebar-muted-l: #93adc6; --t-sidebar-accent-l: #6aafe0; --t-sidebar-active-l: rgb(74 144 196 / .22); --t-sidebar-active-text-l: #ffffff; --t-sombra-rgb-l: 26 58 92; --t-sombra-a-l: .08; --t-bg-d: #0e1622; --t-surface-d: #16202e; --t-surface-2-d: #1b2736; --t-surface-3-d: #22303f; --t-border-d: #263442; --t-border-strong-d: #33475a; --t-text-d: #e6edf5; --t-text-soft-d: #9fb0c2; --t-text-faint-d: #8598ab; --t-heading-d: #dbe7f3; --t-primary-d: #6aafe0; --t-primary-rgb-d: 106 175 224; --t-on-primary-d: #08131f; --t-primary-forte-d: #24405e; --t-on-primary-forte-d: #ffffff; --t-accent-d: #22d3ee; --t-accent-soft-d: rgb(74 144 196 / .18); --t-sidebar-bg-d: #0b1420; --t-sidebar-text-d: #cfe0f0; --t-sidebar-muted-d: #8499ae; --t-sidebar-accent-d: #6aafe0; --t-sidebar-active-d: rgb(74 144 196 / .30); --t-sidebar-active-text-d: #ffffff; --t-sombra-rgb-d: 0 0 0; --t-sombra-a-d: .42; } /* ── pastel — Pane e Punto: marrom de crosta, âmbar de miolo, creme de farinha na bancada. Uma correção deliberada: hoje eles usam #b8791a como cor de link, que dá 3.57:1 sobre o creme. Aqui o link é #7a5230 (6.7:1) e o #b8791a fica como --accent. Mesmo mundo visual, legível. A sombra é MARROM, não preta — é o que dá o ar quente. ── */ :root[data-tema="pastel"] { /* A Pane e Punto escreve o nome em Fraunces desde sempre. É a única coisa que este tema muda na tipografia. */ --font-display: 'Fraunces', Georgia, serif; --t-bg-l: #f7f1e4; --t-surface-l: #fffdf8; --t-surface-2-l: #faf6ec; --t-surface-3-l: #f2ead9; --t-border-l: #e4d8bf; --t-border-strong-l: #d3c4a5; --t-text-l: #4a3726; --t-text-soft-l: #715f42; --t-text-faint-l: #7d6a4b; --t-heading-l: #452a18; --t-primary-l: #7a5230; --t-primary-rgb-l: 122 82 48; --t-on-primary-l: #ffffff; --t-primary-forte-l: #452a18; --t-on-primary-forte-l: #ffffff; --t-accent-l: #b8791a; --t-accent-soft-l: #f6ecd6; --t-sidebar-bg-l: #5b3a24; --t-sidebar-text-l: #f0e6d4; --t-sidebar-muted-l: #cfae80; --t-sidebar-accent-l: #ecc06a; --t-sidebar-active-l: #d99a2b; --t-sidebar-active-text-l: #3b2411; --t-sombra-rgb-l: 91 58 36; --t-sombra-a-l: .10; --t-bg-d: #17120c; --t-surface-d: #211a12; --t-surface-2-d: #291f16; --t-surface-3-d: #33271b; --t-border-d: #3d2f21; --t-border-strong-d: #55402c; --t-text-d: #f0e6d4; --t-text-soft-d: #c3ad8c; --t-text-faint-d: #a08c68; --t-heading-d: #ecc06a; --t-primary-d: #ecc06a; --t-primary-rgb-d: 236 192 106; --t-on-primary-d: #2b1d10; --t-primary-forte-d: #4a3117; --t-on-primary-forte-d: #f7f1e4; --t-accent-d: #d99a2b; --t-accent-soft-d: rgb(217 154 43 / .16); --t-sidebar-bg-d: #120e09; --t-sidebar-text-d: #f0e6d4; --t-sidebar-muted-d: #ad9270; --t-sidebar-accent-d: #ecc06a; --t-sidebar-active-d: rgb(217 154 43 / .28); --t-sidebar-active-text-d: #f7f1e4; --t-sombra-rgb-d: 0 0 0; --t-sombra-a-d: .45; } /* ── forno — boca do forno: tijolo refratário, brasa alaranjada e a fuligem da porta. ── */ :root[data-tema="forno"] { --t-bg-l: #fdf5f1; --t-surface-l: #ffffff; --t-surface-2-l: #fbf1ec; --t-surface-3-l: #f6e6de; --t-border-l: #efd8cd; --t-border-strong-l: #e0bcaa; --t-text-l: #33211a; --t-text-soft-l: #74513f; --t-text-faint-l: #7f5b48; --t-heading-l: #6e2a16; --t-primary-l: #a63c1c; --t-primary-rgb-l: 166 60 28; --t-on-primary-l: #ffffff; --t-primary-forte-l: #58200f; --t-on-primary-forte-l: #ffffff; --t-accent-l: #c25a22; --t-accent-soft-l: #fce9df; --t-sidebar-bg-l: #3b1a10; --t-sidebar-text-l: #f3ded3; --t-sidebar-muted-l: #c79b8a; --t-sidebar-accent-l: #f0955a; --t-sidebar-active-l: rgb(224 122 63 / .34); --t-sidebar-active-text-l: #ffffff; --t-sombra-rgb-l: 110 42 22; --t-sombra-a-l: .10; --t-bg-d: #17100d; --t-surface-d: #211714; --t-surface-2-d: #291d18; --t-surface-3-d: #33241e; --t-border-d: #3f2c24; --t-border-strong-d: #583d31; --t-text-d: #f4e5dd; --t-text-soft-d: #c5a496; --t-text-faint-d: #a78779; --t-heading-d: #f0a072; --t-primary-d: #f0955a; --t-primary-rgb-d: 240 149 90; --t-on-primary-d: #2a120a; --t-primary-forte-d: #4b2013; --t-on-primary-forte-d: #fdf5f1; --t-accent-d: #ff9d63; --t-accent-soft-d: rgb(224 122 63 / .18); --t-sidebar-bg-d: #120c09; --t-sidebar-text-d: #f3ded3; --t-sidebar-muted-d: #b08e7f; --t-sidebar-accent-d: #f0955a; --t-sidebar-active-d: rgb(224 122 63 / .30); --t-sidebar-active-text-d: #ffffff; --t-sombra-rgb-d: 0 0 0; --t-sombra-a-d: .45; } /* ── horta — fermentação natural: sálvia, oliva e linho cru. O tema para quem vende "orgânico" na etiqueta. ── */ :root[data-tema="horta"] { --t-bg-l: #f3f7f0; --t-surface-l: #ffffff; --t-surface-2-l: #f5f9f2; --t-surface-3-l: #eaf1e5; --t-border-l: #dbe6d3; --t-border-strong-l: #bfd0b3; --t-text-l: #22301e; --t-text-soft-l: #4f6348; --t-text-faint-l: #5b6e53; --t-heading-l: #24402a; --t-primary-l: #3d6b3f; --t-primary-rgb-l: 61 107 63; --t-on-primary-l: #ffffff; --t-primary-forte-l: #1e3a22; --t-on-primary-forte-l: #ffffff; --t-accent-l: #5d7a4f; --t-accent-soft-l: #e6efe0; --t-sidebar-bg-l: #1e3320; --t-sidebar-text-l: #dceada; --t-sidebar-muted-l: #9ab494; --t-sidebar-accent-l: #a8c79c; --t-sidebar-active-l: rgb(124 144 112 / .40); --t-sidebar-active-text-l: #ffffff; --t-sombra-rgb-l: 36 64 42; --t-sombra-a-l: .09; --t-bg-d: #0e1410; --t-surface-d: #161e18; --t-surface-2-d: #1b251d; --t-surface-3-d: #222e24; --t-border-d: #2a382c; --t-border-strong-d: #3b4d3d; --t-text-d: #e3ece0; --t-text-soft-d: #a3b89e; --t-text-faint-d: #8ba086; --t-heading-d: #b7d3ae; --t-primary-d: #9cc490; --t-primary-rgb-d: 156 196 144; --t-on-primary-d: #0d1a0e; --t-primary-forte-d: #243927; --t-on-primary-forte-d: #f3f7f0; --t-accent-d: #a8c79c; --t-accent-soft-d: rgb(124 144 112 / .20); --t-sidebar-bg-d: #0a100c; --t-sidebar-text-d: #dceada; --t-sidebar-muted-d: #8ca687; --t-sidebar-accent-d: #a8c79c; --t-sidebar-active-d: rgb(124 144 112 / .34); --t-sidebar-active-text-d: #ffffff; --t-sombra-rgb-d: 0 0 0; --t-sombra-a-d: .45; } /* ── grafite — padaria de centro urbano: aço escovado, concreto e o ouro do trigo. O único tema em que o modo escuro é a versão principal. ── */ :root[data-tema="grafite"] { --t-bg-l: #f5f5f4; --t-surface-l: #ffffff; --t-surface-2-l: #fafaf9; --t-surface-3-l: #f0efed; --t-border-l: #e3e1de; --t-border-strong-l: #c9c6c1; --t-text-l: #23211f; --t-text-soft-l: #5c5853; --t-text-faint-l: #6d6760; --t-heading-l: #2b2926; --t-primary-l: #4a4642; --t-primary-rgb-l: 74 70 66; --t-on-primary-l: #ffffff; --t-primary-forte-l: #23211f; --t-on-primary-forte-l: #ffffff; --t-accent-l: #8a6410; --t-accent-soft-l: #f6eddb; --t-sidebar-bg-l: #211f1d; --t-sidebar-text-l: #e6e3df; --t-sidebar-muted-l: #a19b93; --t-sidebar-accent-l: #e0b445; --t-sidebar-active-l: rgb(224 180 69 / .30); --t-sidebar-active-text-l: #ffffff; --t-sombra-rgb-l: 35 33 31; --t-sombra-a-l: .10; --t-bg-d: #121110; --t-surface-d: #1b1a18; --t-surface-2-d: #22201e; --t-surface-3-d: #2b2926; --t-border-d: #35322e; --t-border-strong-d: #4a4640; --t-text-d: #eceae6; --t-text-soft-d: #b0aaa2; --t-text-faint-d: #948e86; --t-heading-d: #e0b445; --t-primary-d: #e0b445; --t-primary-rgb-d: 224 180 69; --t-on-primary-d: #24200f; --t-primary-forte-d: #3a3733; --t-on-primary-forte-d: #f5f5f4; --t-accent-d: #f0cd76; --t-accent-soft-d: rgb(224 180 69 / .16); --t-sidebar-bg-d: #0d0c0b; --t-sidebar-text-d: #e6e3df; --t-sidebar-muted-d: #948e86; --t-sidebar-accent-d: #e0b445; --t-sidebar-active-d: rgb(224 180 69 / .24); --t-sidebar-active-text-d: #ffffff; --t-sombra-rgb-d: 0 0 0; --t-sombra-a-d: .5; } /* ═══ 3. RESOLUÇÃO CLARA (padrão) ══════════════════════════════════════════ */ :root { --bg: var(--t-bg-l); --surface: var(--t-surface-l); --surface-2: var(--t-surface-2-l); --surface-3: var(--t-surface-3-l); --border: var(--t-border-l); --border-strong: var(--t-border-strong-l); --text: var(--t-text-l); --text-soft: var(--t-text-soft-l); --text-faint: var(--t-text-faint-l); --heading: var(--t-heading-l); --primary: var(--t-primary-l); --primary-rgb: var(--t-primary-rgb-l); --on-primary: var(--t-on-primary-l); --primary-forte: var(--t-primary-forte-l); --on-primary-forte: var(--t-on-primary-forte-l); --accent: var(--t-accent-l); --accent-soft: var(--t-accent-soft-l); --sidebar-bg: var(--t-sidebar-bg-l); --sidebar-text: var(--t-sidebar-text-l); --sidebar-muted: var(--t-sidebar-muted-l); --sidebar-accent: var(--t-sidebar-accent-l); --sidebar-active: var(--t-sidebar-active-l); --sidebar-active-text: var(--t-sidebar-active-text-l); --sombra-rgb: var(--t-sombra-rgb-l); --sombra-a: var(--t-sombra-a-l); /* Semânticas: por MODO, não por tema. Verde precisa parecer verde nas cinco identidades — tintar o erro de creme no `pastel` produz alerta ilegível. */ --success: #2f7a45; --warning: #945a08; --error: #b3341f; --success-bg: #ecf6ef; --warning-bg: #fbf3df; --error-bg: #fbeae6; /* Derivados — escritos UMA vez, valem nas 20 combinações. */ --focus-ring: rgb(var(--primary-rgb) / .20); --shadow-sm: 0 1px 3px rgb(var(--sombra-rgb) / calc(var(--sombra-a) * .8)); --shadow: 0 4px 20px rgb(var(--sombra-rgb) / var(--sombra-a)); --shadow-md: 0 8px 30px rgb(var(--sombra-rgb) / calc(var(--sombra-a) * 1.3)); --scrim: rgb(var(--sombra-rgb) / .55); } /* ═══ 4. RESOLUÇÃO ESCURA AUTOMÁTICA @media NÃO soma especificidade: empata com o bloco 3 e só vence porque vem DEPOIS. Não mova este bloco para cima. ═══════════════════════════ */ @media (prefers-color-scheme: dark) { :root { --bg: var(--t-bg-d); --surface: var(--t-surface-d); --surface-2: var(--t-surface-2-d); --surface-3: var(--t-surface-3-d); --border: var(--t-border-d); --border-strong: var(--t-border-strong-d); --text: var(--t-text-d); --text-soft: var(--t-text-soft-d); --text-faint: var(--t-text-faint-d); --heading: var(--t-heading-d); --primary: var(--t-primary-d); --primary-rgb: var(--t-primary-rgb-d); --on-primary: var(--t-on-primary-d); --primary-forte: var(--t-primary-forte-d); --on-primary-forte: var(--t-on-primary-forte-d); --accent: var(--t-accent-d); --accent-soft: var(--t-accent-soft-d); --sidebar-bg: var(--t-sidebar-bg-d); --sidebar-text: var(--t-sidebar-text-d); --sidebar-muted: var(--t-sidebar-muted-d); --sidebar-accent: var(--t-sidebar-accent-d); --sidebar-active: var(--t-sidebar-active-d); --sidebar-active-text: var(--t-sidebar-active-text-d); --sombra-rgb: var(--t-sombra-rgb-d); --sombra-a: var(--t-sombra-a-d); --success: #5fbd7e; --warning: #e0a534; --error: #f08573; --success-bg: rgb(95 189 126 / .16); --warning-bg: rgb(224 165 52 / .16); --error-bg: rgb(240 133 115 / .16); } } /* ═══ 5. RESOLUÇÃO EXPLÍCITA — (0,2,0), vence o bloco 4 nos DOIS sentidos. É o que permite modo claro num celular configurado em escuro. ════════ */ :root[data-theme="dark"] { --bg: var(--t-bg-d); --surface: var(--t-surface-d); --surface-2: var(--t-surface-2-d); --surface-3: var(--t-surface-3-d); --border: var(--t-border-d); --border-strong: var(--t-border-strong-d); --text: var(--t-text-d); --text-soft: var(--t-text-soft-d); --text-faint: var(--t-text-faint-d); --heading: var(--t-heading-d); --primary: var(--t-primary-d); --primary-rgb: var(--t-primary-rgb-d); --on-primary: var(--t-on-primary-d); --primary-forte: var(--t-primary-forte-d); --on-primary-forte: var(--t-on-primary-forte-d); --accent: var(--t-accent-d); --accent-soft: var(--t-accent-soft-d); --sidebar-bg: var(--t-sidebar-bg-d); --sidebar-text: var(--t-sidebar-text-d); --sidebar-muted: var(--t-sidebar-muted-d); --sidebar-accent: var(--t-sidebar-accent-d); --sidebar-active: var(--t-sidebar-active-d); --sidebar-active-text: var(--t-sidebar-active-text-d); --sombra-rgb: var(--t-sombra-rgb-d); --sombra-a: var(--t-sombra-a-d); --success: #5fbd7e; --warning: #e0a534; --error: #f08573; --success-bg: rgb(95 189 126 / .16); --warning-bg: rgb(224 165 52 / .16); --error-bg: rgb(240 133 115 / .16); } :root[data-theme="light"] { --bg: var(--t-bg-l); --surface: var(--t-surface-l); --surface-2: var(--t-surface-2-l); --surface-3: var(--t-surface-3-l); --border: var(--t-border-l); --border-strong: var(--t-border-strong-l); --text: var(--t-text-l); --text-soft: var(--t-text-soft-l); --text-faint: var(--t-text-faint-l); --heading: var(--t-heading-l); --primary: var(--t-primary-l); --primary-rgb: var(--t-primary-rgb-l); --on-primary: var(--t-on-primary-l); --primary-forte: var(--t-primary-forte-l); --on-primary-forte: var(--t-on-primary-forte-l); --accent: var(--t-accent-l); --accent-soft: var(--t-accent-soft-l); --sidebar-bg: var(--t-sidebar-bg-l); --sidebar-text: var(--t-sidebar-text-l); --sidebar-muted: var(--t-sidebar-muted-l); --sidebar-accent: var(--t-sidebar-accent-l); --sidebar-active: var(--t-sidebar-active-l); --sidebar-active-text: var(--t-sidebar-active-text-l); --sombra-rgb: var(--t-sombra-rgb-l); --sombra-a: var(--t-sombra-a-l); --success: #2f7a45; --warning: #945a08; --error: #b3341f; --success-bg: #ecf6ef; --warning-bg: #fbf3df; --error-bg: #fbeae6; } /* ═══ 6. OVERRIDE DA EMPRESA Injetado pelo servidor como