/* ═══════════════════════════════════════════════════════════
   SYSCORE — TOKENS (a folha comum, embebível em TODO o módulo)
   Convenção UI: Code\Telmo\docs\CONVENCAO-UI.md
   ═══════════════════════════════════════════════════════════
   SÓ VARIÁVEIS. Zero componentes, zero seletores de classe —
   é isso que a torna embebível: um módulo linka esta folha
   ANTES do seu app.css e herda a casa inteira sem herdar UI.

   Três eixos independentes no <html>, carimbados por
   assets/theme.js (e pelo anti-flash inline de cada <head>):
     data-theme  = light | dark            → claro/escuro
     data-skin   = quiet | fluent | citron | clean | mono
                                           → COR e LETRA
     data-layout = confortavel | compacto | amplo
                                           → MEDIDA
   Ausentes: quiet + confortavel + o tema em cache.

   Como um módulo herda (Convenção UI §10):
     1. linka  ../../../assets/tokens.css?v=v1  ANTES do app.css
     2. carimba os 3 eixos no anti-flash do <head> (molde:
        modules/Politicas/index.html) — sem data-theme o shell
        injeta-lhe filter:invert(1) e o escuro vem a DOBRAR
        (sysDarkEmbed, assets/modules.js)
     3. consome com fallback — var(--bg1, #fff) — porque esta
        folha não carrega quando a página corre sozinha
     4. NUNCA redeclara :root próprio

   Cuidado com as duas acepções de «skin»: o campo skin:'fabrica'
   do registo de módulos (SYS_MODULES / sysSkinEmbed) NÃO é este
   data-skin — são coisas diferentes com o mesmo nome.

   Os blocos 1 (paleta) saíram do styles.css a 31/07 sem alterar
   um único valor; mudar uma skin continua a ser mudar nos DOIS
   sítios (aqui e em Code\Telmo\shared\tokens.css).
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   1. PALETA — cor, letra, sombra e véu por skin × tema
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f5f7;
  --bg1:#ffffff;
  --bg2:#fbfbfd;
  --bg3:#f0f0f3;
  --bg4:#e4e4e9;
  --line:#e8e8ed;
  --line2:#d2d2d7;
  --line3:#aeaeb2;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.04);
  --shadow-md:0 2px 8px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);
  --shadow-lg:0 4px 16px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.16);

  --cyan:#0071e3;       /* primary accent (azul Apple) */
  --cyan2:#0077ed;      /* hover: clareia, como em apple.com */
  --cyan-soft:#eef5fd;
  --acc-bd:#c9dff6;

  --gold:#b25a00;     --gold-bg:#fdf6ec;     --gold-bd:#efd3a3;
  --amber:#e08a00;
  --green:#1d8a45;    --green-bg:#eff9f1;    --green-bd:#b3dfc0;
  --red:#d70015;      --red-bg:#fdf1f1;      --red-bd:#f3b8bc;
  --purple:#8944ab;   --purple-bg:#f8f2fb;   --purple-bd:#ddc2ec;
  --teal:#0a8f86;     --rose:#c2185b;

  --text:#1d1d1f;
  --text2:#515154;
  --text3:#86868b;
  --white:#1d1d1f;

  --erp:#0071e3;
  --mes:#b25a00;
  --quality:#8944ab;
  --maint:#1d8a45;

  --font-ui:'Inter','SF Pro Text',-apple-system,'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --font-display:'Inter','SF Pro Display',-apple-system,'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Consolas,monospace;

  /* vidro, véus e afins — variam com o tema */
  --dim:rgba(28,28,30,.30);
  --glass-page:rgba(245,245,247,.55);
  --glass-panel:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.60);
  --glass-menu:rgba(255,255,255,.88);
  --scroll:rgba(0,0,0,.16);
  --scroll-hover:rgba(0,0,0,.30);
  --sel:rgba(0,113,227,.16);
  --focus:rgba(0,113,227,.28);
  --ring:rgba(0,113,227,.14);
}

/* ── MODO ESCURO (data-theme="dark" no <html>; ver assets/theme.js) ── */
:root[data-theme="dark"]{
  --bg:#141416;
  --bg1:#1d1d20;
  --bg2:#212124;
  --bg3:#28282c;
  --bg4:#333338;
  --line:#2e2e33;
  --line2:#3d3d43;
  --line3:#55555c;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.25);
  --shadow-md:0 2px 8px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.40);
  --shadow-lg:0 4px 16px rgba(0,0,0,.40),0 24px 64px rgba(0,0,0,.55);

  --cyan:#0a84ff;
  --cyan2:#2094ff;
  --cyan-soft:#16293f;
  --acc-bd:#24466b;

  --gold:#e8a13d;     --gold-bg:#2c2113;     --gold-bd:#54401d;
  --amber:#f0a63c;
  --green:#45c866;    --green-bg:#132a1a;    --green-bd:#245c33;
  --red:#ff6961;      --red-bg:#331a19;      --red-bd:#66302c;
  --purple:#bf5af2;   --purple-bg:#2a1a33;   --purple-bd:#54336b;
  --teal:#3fd0c9;     --rose:#ff6f9c;

  --text:#f5f5f7;
  --text2:#a8a8ad;
  --text3:#7a7a80;
  --white:#f5f5f7;

  --erp:#0a84ff;
  --mes:#e8a13d;
  --quality:#bf5af2;
  --maint:#45c866;

  --ext:#ff6961;  --ext-bg:#331a19;  --ext-bd:#66302c;
  --sys:#a8a8ad;  --sys-bg:#28282c;  --sys-bd:#3d3d43;

  --dim:rgba(0,0,0,.48);
  --glass-page:rgba(20,20,22,.55);
  --glass-panel:rgba(29,29,32,.75);
  --glass-border:rgba(255,255,255,.12);
  --glass-menu:rgba(32,32,36,.90);
  --scroll:rgba(255,255,255,.18);
  --scroll-hover:rgba(255,255,255,.32);
  --sel:rgba(10,132,255,.35);
  --focus:rgba(10,132,255,.40);
  --ring:rgba(10,132,255,.28);
  color-scheme:dark;
}

/* ═══ SKINS (Convenção UI 31/07 — Code\Telmo\docs\CONVENCAO-UI.md) ═══
   data-skin no <html> troca SÓ variáveis; a estrutura não muda.
   Ausente ou "quiet" = os :root acima, byte a byte. Cada skin é um par
   claro+escuro; os valores são os mesmos do Code\Telmo\shared\tokens.css
   (mudar uma skin é mudar nos DOIS sítios). AA medido: --text/--text2
   ≥4,5:1 sobre --bg/--bg1 nas 8 combinações; acento aguenta texto
   branco ≥3:1 (o precedente é o --cyan do quiet dark). */

/* ── FLUENT «Fluent (tipo Windows)» ── */
:root[data-skin="fluent"]{
  --bg:#f3f3f3; --bg1:#ffffff; --bg2:#fafafa; --bg3:#ededed; --bg4:#e0e0e0;
  --line:#e5e5e5; --line2:#d1d1d1; --line3:#ababab;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 2px 8px rgba(0,0,0,.07),0 8px 24px rgba(0,0,0,.09);
  --shadow-lg:0 4px 16px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.18);
  --cyan:#005fb8; --cyan2:#0067c0; --cyan-soft:#eaf3fb; --acc-bd:#bcd6ee;
  --gold:#9d5d00; --gold-bg:#fdf6e7; --gold-bd:#eed49b; --amber:#de8500;
  --green:#107c10; --green-bg:#eaf6ea; --green-bd:#b0dcb0;
  --red:#c42b1c; --red-bg:#fdf0ef; --red-bd:#f2b8b3;
  --purple:#744da9; --purple-bg:#f5f0fa; --purple-bd:#d5c2e8;
  --teal:#0e7c86; --rose:#b4295e;
  --text:#1b1b1b; --text2:#5d5d5d; --text3:#757575; --white:#1b1b1b;
  --erp:#005fb8; --mes:#9d5d00; --quality:#744da9; --maint:#107c10;
  --font-ui:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Cascadia Mono','Cascadia Code','JetBrains Mono',Consolas,monospace;
  --dim:rgba(0,0,0,.32);
  --glass-page:rgba(243,243,243,.55); --glass-panel:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.60); --glass-menu:rgba(255,255,255,.90);
  --scroll:rgba(0,0,0,.18); --scroll-hover:rgba(0,0,0,.32);
  --sel:rgba(0,95,184,.16); --focus:rgba(0,95,184,.30); --ring:rgba(0,95,184,.14);
}
:root[data-skin="fluent"][data-theme="dark"]{
  --bg:#202020; --bg1:#2b2b2b; --bg2:#2f2f2f; --bg3:#363636; --bg4:#424242;
  --line:#3a3a3a; --line2:#4a4a4a; --line3:#616161;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.28);
  --shadow-md:0 2px 8px rgba(0,0,0,.32),0 12px 32px rgba(0,0,0,.42);
  --shadow-lg:0 4px 16px rgba(0,0,0,.42),0 24px 64px rgba(0,0,0,.58);
  --cyan:#3f96e0; --cyan2:#54a3e6; --cyan-soft:#142c44; --acc-bd:#26507c;
  --gold:#e9b158; --gold-bg:#2d2413; --gold-bd:#57451f; --amber:#f0b23c;
  --green:#6ccb5f; --green-bg:#152a13; --green-bd:#2b5c27;
  --red:#ff7168; --red-bg:#331b19; --red-bd:#66312c;
  --purple:#c29aec; --purple-bg:#291a33; --purple-bd:#53366b;
  --teal:#5cc8c2; --rose:#f087a8;
  --text:#f5f5f5; --text2:#b0b0b0; --text3:#8a8a8a; --white:#f5f5f5;
  --erp:#3f96e0; --mes:#e9b158; --quality:#c29aec; --maint:#6ccb5f;
  --ext:#ff7168; --ext-bg:#331b19; --ext-bd:#66312c;
  --sys:#b0b0b0; --sys-bg:#363636; --sys-bd:#4a4a4a;
  --dim:rgba(0,0,0,.50);
  --glass-page:rgba(32,32,32,.55); --glass-panel:rgba(43,43,43,.75);
  --glass-border:rgba(255,255,255,.10); --glass-menu:rgba(46,46,46,.92);
  --scroll:rgba(255,255,255,.18); --scroll-hover:rgba(255,255,255,.32);
  --sel:rgba(96,182,245,.32); --focus:rgba(96,182,245,.40); --ring:rgba(96,182,245,.26);
  color-scheme:dark;
}

/* ── CITRON «Sinalética» — o citron vivo #C6D92F é superfície decorativa; o
   acento interativo é o citron-tinta (o botão primário leva texto branco) ── */
:root[data-skin="citron"]{
  --bg:#ECEFEE; --bg1:#ffffff; --bg2:#F6F8F7; --bg3:#E6EAE9; --bg4:#D8DEDD;
  --line:#DCE2E1; --line2:#C2CBC9; --line3:#97A3A1;
  --shadow:0 1px 2px rgba(32,38,43,.04),0 4px 14px rgba(32,38,43,.06);
  --shadow-md:0 2px 8px rgba(32,38,43,.06),0 14px 40px rgba(32,38,43,.10);
  --shadow-lg:0 4px 16px rgba(32,38,43,.08),0 24px 64px rgba(32,38,43,.18);
  --cyan:#5c6a10; --cyan2:#6d7d13; --cyan-soft:#F4F7DC; --acc-bd:#d4dd93;
  --gold:#B8860B; --gold-bg:#FBF3DC; --gold-bd:#e8d193; --amber:#cf9705;
  --green:#1F6A4C; --green-bg:#E9F3EE; --green-bd:#b5d8c6;
  --red:#B8452F; --red-bg:#F9E9E5; --red-bd:#eec0b5;
  --purple:#7a4a8f; --purple-bg:#f4edf7; --purple-bd:#d9c3e3;
  --teal:#1f6a63; --rose:#a63a63;
  --text:#20262B; --text2:#5C686C; --text3:#6B7579; --white:#20262B;
  --erp:#5c6a10; --mes:#B8860B; --quality:#7a4a8f; --maint:#1F6A4C;
  --font-ui:'Archivo',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-display:'Archivo',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --dim:rgba(32,38,43,.30);
  --glass-page:rgba(236,239,238,.55); --glass-panel:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.60); --glass-menu:rgba(255,255,255,.88);
  --scroll:rgba(32,38,43,.16); --scroll-hover:rgba(32,38,43,.30);
  --sel:rgba(92,106,16,.18); --focus:rgba(92,106,16,.30); --ring:rgba(198,217,47,.30);
}
:root[data-skin="citron"][data-theme="dark"]{
  --bg:#151817; --bg1:#1d201f; --bg2:#212524; --bg3:#282c2b; --bg4:#333837;
  --line:#2e3332; --line2:#3d4342; --line3:#555c5b;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.25);
  --shadow-md:0 2px 8px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.40);
  --shadow-lg:0 4px 16px rgba(0,0,0,.40),0 24px 64px rgba(0,0,0,.55);
  --cyan:#8a9c22; --cyan2:#99ac2c; --cyan-soft:#262b10; --acc-bd:#4a5311;
  --gold:#e5b04a; --gold-bg:#2c2413; --gold-bd:#54431d; --amber:#eeb03c;
  --green:#4ec98a; --green-bg:#132a1e; --green-bd:#245c3d;
  --red:#f07862; --red-bg:#331d19; --red-bd:#66352c;
  --purple:#c08fdd; --purple-bg:#291a33; --purple-bd:#53366b;
  --teal:#4ec9c0; --rose:#e089a8;
  --text:#f2f4f3; --text2:#a8b0ae; --text3:#7c8583; --white:#f2f4f3;
  --erp:#8a9c22; --mes:#e5b04a; --quality:#c08fdd; --maint:#4ec98a;
  --ext:#f07862; --ext-bg:#331d19; --ext-bd:#66352c;
  --sys:#a8b0ae; --sys-bg:#282c2b; --sys-bd:#3d4342;
  --dim:rgba(0,0,0,.48);
  --glass-page:rgba(21,24,23,.55); --glass-panel:rgba(29,32,31,.75);
  --glass-border:rgba(255,255,255,.12); --glass-menu:rgba(33,36,35,.90);
  --scroll:rgba(255,255,255,.18); --scroll-hover:rgba(255,255,255,.32);
  --sel:rgba(198,217,47,.28); --focus:rgba(198,217,47,.35); --ring:rgba(198,217,47,.22);
  color-scheme:dark;
}

/* ── CLEAN «Clean Light» — a folha do Menu\assets do Code\Telmo, com nome ── */
:root[data-skin="clean"]{
  --bg:#f7f8fa; --bg1:#ffffff; --bg2:#fafbfc; --bg3:#f1f5f9; --bg4:#e2e8f0;
  --line:#e5e7eb; --line2:#d1d5db; --line3:#9ca3af;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.04);
  --shadow-md:0 4px 16px rgba(15,23,42,.08),0 1px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 40px rgba(15,23,42,.14);
  --cyan:#4f46e5; --cyan2:#4338ca; --cyan-soft:#eef2ff; --acc-bd:#c7d2fe;
  --gold:#d97706; --gold-bg:#fffbeb; --gold-bd:#fcd34d; --amber:#f59e0b;
  --green:#059669; --green-bg:#ecfdf5; --green-bd:#6ee7b7;
  --red:#dc2626; --red-bg:#fef2f2; --red-bd:#fca5a5;
  --purple:#7c3aed; --purple-bg:#f5f3ff; --purple-bd:#c4b5fd;
  --teal:#0d9488; --rose:#db2777;
  --text:#0f172a; --text2:#475569; --text3:#8a94a6; --white:#0f172a;
  --erp:#4f46e5; --mes:#d97706; --quality:#7c3aed; --maint:#059669;
  --font-ui:'Figtree',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-display:'Figtree',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --dim:rgba(15,23,42,.30);
  --glass-page:rgba(247,248,250,.55); --glass-panel:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.60); --glass-menu:rgba(255,255,255,.88);
  --scroll:rgba(15,23,42,.16); --scroll-hover:rgba(15,23,42,.30);
  --sel:rgba(79,70,229,.16); --focus:rgba(79,70,229,.28); --ring:rgba(79,70,229,.14);
}
:root[data-skin="clean"][data-theme="dark"]{
  --bg:#131722; --bg1:#1a2030; --bg2:#1e2436; --bg3:#252c40; --bg4:#303950;
  --line:#2a3247; --line2:#3a4560; --line3:#556080;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.28);
  --shadow-md:0 2px 8px rgba(0,0,0,.32),0 12px 32px rgba(0,0,0,.42);
  --shadow-lg:0 4px 16px rgba(0,0,0,.42),0 24px 64px rgba(0,0,0,.58);
  --cyan:#818cf8; --cyan2:#93a0fb; --cyan-soft:#232a4d; --acc-bd:#3a4580;
  --gold:#fbbf24; --gold-bg:#2c2410; --gold-bd:#57451a; --amber:#f59e0b;
  --green:#34d399; --green-bg:#122a20; --green-bd:#245c44;
  --red:#f87171; --red-bg:#331b1b; --red-bd:#663030;
  --purple:#c4b5fd; --purple-bg:#291a3d; --purple-bd:#533680;
  --teal:#2dd4bf; --rose:#f472b6;
  --text:#f1f5f9; --text2:#a6b1c2; --text3:#7c8797; --white:#f1f5f9;
  --erp:#818cf8; --mes:#fbbf24; --quality:#c4b5fd; --maint:#34d399;
  --ext:#f87171; --ext-bg:#331b1b; --ext-bd:#663030;
  --sys:#a6b1c2; --sys-bg:#252c40; --sys-bd:#3a4560;
  --dim:rgba(0,0,0,.48);
  --glass-page:rgba(19,23,34,.55); --glass-panel:rgba(26,32,48,.75);
  --glass-border:rgba(255,255,255,.12); --glass-menu:rgba(30,36,54,.90);
  --scroll:rgba(255,255,255,.18); --scroll-hover:rgba(255,255,255,.32);
  --sel:rgba(129,140,248,.32); --focus:rgba(129,140,248,.40); --ring:rgba(129,140,248,.26);
  color-scheme:dark;
}

/* ═══════════════════════════════════════════════════════════
   2. --on-accent — A TINTA QUE VAI POR CIMA DO ACENTO
   Convenção UI §1. Antes, o `.btn-primary` tinha `color:#fff`
   FIXO: isso obrigava toda a skin a ter acento escuro, e medido
   a 31/07 os QUATRO temas escuros falhavam o 4,5:1 com branco
   (quiet 3,65 · fluent 3,16 · citron 3,06 · clean 2,98). Cada
   skin declara agora a sua tinta; os números medidos estão no
   relatório conta3-convencao-ui-f4-f5.

   `--on-estado` é a mesma ideia para os PREENCHIMENTOS DE ESTADO
   (contadores e bolhas sobre --red/--green/--gold/--purple).
   Medido a 31/07: nos QUATRO temas escuros o branco falha em
   TODOS os estados (1,67 a 2,99) — e a folha já tinha a mesma
   correção escrita à MÃO três vezes, com um `#201010` fixo
   (.help-fab-dot, .nov-marca, .hd-tab-n). Era esse o sinal de
   que faltava o token: um remendo por componente garante que o
   quarto componente nasce errado. As três regras desapareceram.
   ═══════════════════════════════════════════════════════════ */
:root{ --on-accent:#ffffff; --on-estado:#ffffff }               /* quiet claro  · #0071e3 ↔ branco = 4,70 */
:root[data-theme="dark"]{ --on-accent:#1d1d1f; --on-estado:#1d1d1f }  /* quiet escuro · #0a84ff ↔ tinta = 4,61 */
:root[data-skin="fluent"]{ --on-accent:#ffffff; --on-estado:#ffffff }                /* #005fb8 ↔ branco = 6,31 */
:root[data-skin="fluent"][data-theme="dark"]{ --on-accent:#1d1d1f; --on-estado:#1d1d1f }  /* #3f96e0 ↔ tinta = 5,33 */
:root[data-skin="citron"]{ --on-accent:#ffffff; --on-estado:#ffffff }                /* #5c6a10 ↔ branco = 5,96 */
:root[data-skin="citron"][data-theme="dark"]{ --on-accent:#1d1d1f; --on-estado:#1d1d1f }  /* #8a9c22 ↔ tinta = 5,50 */
:root[data-skin="clean"]{ --on-accent:#ffffff; --on-estado:#ffffff }                 /* #4f46e5 ↔ branco = 6,29 */
:root[data-skin="clean"][data-theme="dark"]{ --on-accent:#1d1d1f; --on-estado:#1d1d1f }   /* #818cf8 ↔ tinta = 5,64 */
/* (as duas linhas da skin `mono` estão no bloco 4, com o resto da paleta dela) */

/* ═══════════════════════════════════════════════════════════
   2b. CORES POR ÁREA DE ATUAÇÃO (menu «Ver por», 04/08)
   «A cor dos icons, tem de estar relacionado com o grupo. Cor
   gestao, comercial, produtivo» (Telmo, 04/08). As oito áreas
   e os setores vestem-se por AQUI — nunca por hex no render.

   Declaradas UMA vez, e de propósito por REFERÊNCIA a um token
   da paleta: a substituição de uma custom property resolve-se no
   ponto de USO, logo `var(--area-comercial)` dá o `--amber` da
   skin ativa sem precisar de um bloco por skin. Trocar de skin
   ou de tema muda as áreas com a casa; na `mono` desbotam com o
   resto (é por isso que cada área leva também ÍCONE próprio —
   cor só nunca chega, Convenção UI §5).

   Contraste MEDIDO (04/08, `--teal`/`--rose` novos, sobre --bg1
   e --bg nas 5 skins × 2 temas): mínimo 3,52:1, máximo 9,70:1 —
   as 20 combinações ≥3:1, o piso de objeto gráfico.
   A lista de tokens que TÊM de existir é a do
   `MenuEixos.tokensDeCor()` e a parede menu-eixos compara-as.
   ═══════════════════════════════════════════════════════════ */
:root{
  --area-administracao:var(--erp);        /* azul    — direção e indicadores */
  --area-comercial:var(--amber);          /* laranja — clientes e propostas */
  --area-comunicacao:var(--maint);        /* verde   — e-mail, chat, marketing */
  --area-administrativo:var(--teal);      /* teal    — faturação e documentos */
  --area-informatico:var(--text2);        /* neutro  — o «Sistema» sempre foi neutro */
  --area-inovacao:var(--quality);         /* púrpura — desenvolvimento e CAD */
  --area-operacoes:var(--mes);            /* terra   — o MES de sempre */
  --area-rh:var(--rose);                  /* rosa    — pessoas */
  --area-nenhuma:var(--text3);            /* esbatido — o balde do que falta classificar */
  /* lente «Processo» (D4): as 4 FAMÍLIAS da árvore RH. Por referência, como
     as áreas — a parede menu-eixos compara com MenuEixos.tokensDeCor() */
  --proc-administrativos:var(--teal);     /* teal    — escritório e documentos */
  --proc-pre-industrial:var(--quality);   /* púrpura — desenho, validação, planeamento */
  --proc-industriais:var(--mes);          /* terra   — o chão de fábrica */
  --proc-apoio:var(--maint);              /* verde   — manutenção, logística, IT */
}

/* ═══════════════════════════════════════════════════════════
   3. MEDIDAS — O EIXO `data-layout` (Convenção UI §3)
   `data-skin` é COR e LETRA; `data-layout` é MEDIDA. Nenhum
   layout muda cor, nenhuma skin muda medida — é essa separação
   que deixa o catálogo crescer (3 layouts × 5 skins × 2 temas
   com UM conjunto de regras).
   O que é fixo continua fixo: a ESTRUTURA (topbar + rail +
   cards + ctxmenu + drawer `?`). O que passou a variar são os
   NÚMEROS, que até 31/07 estavam literais no styles.css.
   `data-layout` ausente ≡ `confortavel`, e os valores do
   `confortavel` são os MEDIDOS no browser a 31/07 antes do
   refactor (topbar 54 · rail 268 · linha 32 · base 13px) — é a
   aceitação nº1: quiet+confortavel+claro não muda um pixel.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* estrutura */
  --h-topbar:54px;       --h-strip:34px;
  --w-rail:268px;        --w-rail-min:60px;
  --pad-topbar-x:22px;
  /* raios: -card = widget/metric · -box = caixas menores (pesquisa, secções) */
  --r-card:12px;         --r-box:10px;          --r-btn:9px;          --r-row:8px;
  /* controlos */
  --h-btn:30px;          --sz-icon-btn:34px;    --sz-icon-sm:28px;
  --sz-avatar:26px;      --btn-pad-y:7px;       --btn-pad-x:14px;
  /* tipografia */
  --fs-base:13px;        --fs-btn:12px;         --fs-row:12.5px;
  /* linhas de lista/menu e cartões */
  --h-row:32px;          --pad-row-y:7px;       --pad-row-x:14px;
  --pad-card:14px;       --pad-card-x:16px;     --pad-head:13px;      --gap:16px;
  /* alvo tátil mínimo (AA) */
  --tap-min:44px;
}

/* ── COMPACTO — mais linha no mesmo ecrã ── */
:root[data-layout="compacto"]{
  --h-topbar:44px;       --h-strip:28px;
  --w-rail:230px;        --w-rail-min:52px;
  --pad-topbar-x:16px;
  --r-card:8px;          --r-box:6px;           --r-btn:7px;          --r-row:6px;
  --h-btn:26px;          --sz-icon-btn:30px;    --sz-icon-sm:24px;
  --sz-avatar:22px;      --btn-pad-y:5px;       --btn-pad-x:11px;
  --fs-base:12.5px;      --fs-btn:11.5px;       --fs-row:12px;
  --h-row:28px;          --pad-row-y:5px;       --pad-row-x:11px;
  --pad-card:10px;       --pad-card-x:12px;     --pad-head:9px;       --gap:12px;
  --tap-min:40px;
}

/* ── AMPLO «Toque» — alvos grandes, para tablet e oficina ── */
:root[data-layout="amplo"]{
  --h-topbar:64px;       --h-strip:40px;
  --w-rail:290px;        --w-rail-min:64px;
  --pad-topbar-x:26px;
  --r-card:16px;         --r-box:14px;          --r-btn:11px;         --r-row:12px;
  --h-btn:36px;          --sz-icon-btn:40px;    --sz-icon-sm:34px;
  --sz-avatar:30px;      --btn-pad-y:9px;       --btn-pad-x:18px;
  --fs-base:15px;        --fs-btn:13.5px;       --fs-row:14px;
  --h-row:44px;          --pad-row-y:12px;      --pad-row-x:16px;
  --pad-card:18px;       --pad-card-x:20px;     --pad-head:17px;      --gap:20px;
  --tap-min:48px;
}

/* Alvo tátil: em `pointer:coarse` o mínimo é SEMPRE 44px (regra AA de alvo),
   qualquer que seja o layout — o `compacto` num tablet degrada para os alvos
   do `confortavel` e diz-se na UI (a dica no menu do utilizador). O `amplo`
   fica nos 48px porque já está acima do mínimo. */
@media (pointer:coarse){
  :root[data-layout="compacto"]{ --tap-min:44px }
}

/* ═══════════════════════════════════════════════════════════
   4. SKIN `mono` «Monocromático» (Convenção UI §2)
   Superfícies e acento SEM COR: o acento é tinta neutra e os
   realces fazem-se por peso, linha e preenchimento em vez de
   matiz. Os cinzas são os do `quiet` (já são neutros, sem tinta
   azul) — mono não é uma paleta nova, é a mesma casa sem cor.
   Os ESTADOS mantêm cor, DESSATURADA a 40% da saturação
   original com a luminosidade intacta: estado é informação, não
   decoração, e um mono a sério cegava a semáforo. Em contrapar-
   tida nenhum estado pode depender só da cor — leva sempre
   ícone ou rótulo (Convenção UI §5, vale para todas as skins).
   ═══════════════════════════════════════════════════════════ */
:root[data-skin="mono"]{
  --bg:#f5f5f7; --bg1:#ffffff; --bg2:#fbfbfd; --bg3:#f0f0f3; --bg4:#e4e4e9;
  --line:#e8e8ed; --line2:#d2d2d7; --line3:#aeaeb2;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.04);
  --shadow-md:0 2px 8px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);
  --shadow-lg:0 4px 16px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.16);
  /* acento = tinta neutra; o hover clareia, como no quiet */
  --cyan:#1d1d1f; --cyan2:#3a3a3d; --cyan-soft:#ececf0; --acc-bd:#c8c8cf;
  --on-accent:#ffffff; --on-estado:#ffffff;               /* #1d1d1f ↔ branco = 16,83 */
  /* estados dessaturados a 40% (luminosidade intacta) */
  --gold:#7d5935;     --gold-bg:#f8f5f1;     --gold-bd:#d8cdba;
  --amber:#856839;
  --green:#3e694e;    --green-bg:#f2f6f3;    --green-bd:#c0d2c5;
  --red:#974149;      --red-bg:#f9f5f5;      --red-bd:#e1cacb;
  --purple:#7f638c;   --purple-bg:#f7f5f8;   --purple-bd:#d9cfdf;
  --teal:#3e6966;     --rose:#8c5a6b;
  --text:#1d1d1f; --text2:#515154; --text3:#86868b; --white:#1d1d1f;
  /* cor por universo: também sem matiz forte, mas ainda distinguível */
  --erp:#44719f; --mes:#7d5935; --quality:#7f638c; --maint:#3e694e;
  --font-ui:'Inter','SF Pro Text',-apple-system,'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --font-display:'Inter','SF Pro Display',-apple-system,'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Consolas,monospace;
  --dim:rgba(28,28,30,.30);
  --glass-page:rgba(245,245,247,.55); --glass-panel:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.60); --glass-menu:rgba(255,255,255,.88);
  --scroll:rgba(0,0,0,.16); --scroll-hover:rgba(0,0,0,.30);
  --sel:rgba(29,29,31,.14); --focus:rgba(29,29,31,.26); --ring:rgba(29,29,31,.12);
}
:root[data-skin="mono"][data-theme="dark"]{
  --bg:#141416; --bg1:#1d1d20; --bg2:#212124; --bg3:#28282c; --bg4:#333338;
  --line:#2e2e33; --line2:#3d3d43; --line3:#55555c;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.25);
  --shadow-md:0 2px 8px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.40);
  --shadow-lg:0 4px 16px rgba(0,0,0,.40),0 24px 64px rgba(0,0,0,.55);
  /* acento claro sobre fundo escuro — é isto que o --on-accent destranca */
  --cyan:#e6e6ea; --cyan2:#f2f2f6; --cyan-soft:#2a2a2e; --acc-bd:#44444b;
  --on-accent:#1d1d1f; --on-estado:#1d1d1f;               /* #e6e6ea ↔ tinta = 13,52 */
  --gold:#b59870;     --gold-bg:#25201b;     --gold-bd:#443b2d;
  --amber:#ba9c72;
  --green:#6ca17a;    --green-bg:#1a231d;    --green-bd:#354b3b;
  --red:#d09490;      --red-bg:#2b2121;      --red-bd:#553f3d;
  --purple:#b088c4;   --purple-bg:#28222c;   --purple-bd:#51445a;
  --teal:#6ca19d; --rose:#c48fa2;
  --text:#f5f5f7; --text2:#a8a8ad; --text3:#7a7a80; --white:#f5f5f7;
  --erp:#5484b6; --mes:#b59870; --quality:#b088c4; --maint:#6ca17a;
  --ext:#d09490;  --ext-bg:#2b2121;  --ext-bd:#553f3d;
  --sys:#a8a8ad;  --sys-bg:#28282c;  --sys-bd:#3d3d43;
  --dim:rgba(0,0,0,.48);
  --glass-page:rgba(20,20,22,.55); --glass-panel:rgba(29,29,32,.75);
  --glass-border:rgba(255,255,255,.12); --glass-menu:rgba(32,32,36,.90);
  --scroll:rgba(255,255,255,.18); --scroll-hover:rgba(255,255,255,.32);
  --sel:rgba(230,230,234,.22); --focus:rgba(230,230,234,.32); --ring:rgba(230,230,234,.18);
  color-scheme:dark;
}