/* ============================================================= TOKENS — Global Laser A paleta é travada pelo CLAUDE.md. O que este arquivo faz é transformar os valores soltos em escala, e dar nome semântico pra cada uso — é isso que permite o tema escuro sem duplicar uma linha de componente. Tema: js/tema.js escreve data-tema="claro" | "escuro" no antes da primeira pintura. Sem light-dark() de propósito: se a função não existir no navegador do celular dele, a página inteira fica sem cor. Duas listas explícitas nunca falham. ============================================================= */ :root{ /* ---------- escala de tipo ---------- */ --fs-micro : 10px; /* rótulo mono, caixa alta */ --fs-tiny : 11px; --fs-xs : 12px; --fs-sm : 13px; --fs-base : 14px; --fs-md : 15px; --fs-lg : 17px; --fs-xl : 20px; --fs-2xl : 24px; --fs-3xl : 30px; --fs-4xl : 38px; /* letter-spacing amarrado ao tamanho: aperta conforme cresce */ --ls-label : .12em; --ls-mono : .08em; --ls-tight : -.02em; --ls-xtight: -.035em; /* ---------- espaço (régua de 4) ---------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; /* ---------- raio ---------- */ --r-xs: 6px; --r-sm: 9px; --r: 14px; --r-lg: 18px; --r-xl: 22px; --r-full: 999px; /* ---------- área de toque mínima (CLAUDE.md) ---------- */ --tap: 44px; /* ---------- movimento ---------- */ --ease : cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --t1: 140ms; --t2: 240ms; --t3: 420ms; /* ---------- medidas da casca ---------- */ --w: 560px; /* largura máxima da coluna */ --barra-h: 60px; /* barra inferior de navegação */ --topo-h: calc(var(--tap) + var(--s2) * 2 + 1px); /* header, sem a safe area */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } /* ============================================================= TEMA CLARO — o padrão. Otimizado pra leitura no sol. ============================================================= */ :root, :root[data-tema="claro"]{ color-scheme: light; /* superfícies */ --bg : #EDF0F1; --bg-sunk : #E3E8EA; --card : #FFFFFF; --card-2 : #F6F8F9; /* texto */ --fg : #131A20; --fg-2 : #566470; /* 5.1:1 sobre --bg — o #6B7A85 original não passava AA em 11px */ --fg-3 : #8494A0; /* NUNCA em texto: só traço, borda e ícone apagado (3.1:1) */ /* bordas */ --edge : #D8DFE2; --edge-2 : #E8ECEE; /* laje escura: header, hero, gate, KPI principal */ --slab : #131A20; --slab-2 : #1E2A34; --slab-fg : #FFFFFF; --slab-fg-2: #9BAAB4; --slab-edge: #2A3540; /* demanda, urgência, ação principal */ --heat : #D81B60; --heat-fg : #B4144F; /* A laje é escura nos dois temas, e #D81B60 sobre ela dá só 3.5:1. O rosa claro é o mesmo do tema escuro — ~6:1 e a marca acende. */ --heat-laje: #FF5C90; --heat-soft: #FBE3EC; --heat-edge: #F5CBDC; /* confirmação, dia de atendimento */ --go : #0F766E; --go-fg : #0B5C56; --go-soft : #DDF0ED; --go-edge : #B7DFDA; /* atraso, falta, risco */ --warn : #B45309; --warn-fg : #8F4207; --warn-soft: #FBEEDC; --warn-edge: #F1D8B4; /* apoio */ --cool : #1D4ED8; /* agendado */ --verde : #15803D; /* compareceu — verde de chegada, distinto do go */ --plum : #6D28D9; /* retorno, conversa pausada */ --plum-soft: #EDE4FB; --live : #3DDC97; /* pulso do agente */ --danger : #7C2D2D; /* WhatsApp desligado */ /* Rampa ordinal do funil — uma cor só, escurecendo a cada etapa. O funil é uma sequência ordenada, não categorias independentes: rampa ordinal é a forma certa e some com o problema de daltonismo que 5 cores avulsas criam. Validada: L monotônica, degraus ≥ .06, ponta clara acima de 2:1 sobre a superfície. */ --funil-1 : #EE8FB1; --funil-2 : #E76A99; --funil-3 : #DD4180; --funil-4 : #C8185A; --funil-5 : #93103F; --grade : #E8ECEE; /* linha de grade, um passo fora da superfície */ /* Preenchimento da barra de demanda, atrás do cartão de cidade. Lavagem translúcida em vez do --heat-soft chapado: com cinco cartões na tela, o rosa cheio vira ruído e some com o ranking. */ --fundo-demanda: linear-gradient(90deg, rgba(216,27,96,.11), rgba(216,27,96,.01)); /* temperatura do lead */ --t-quente : #D81B60; --t-morna : #E8A33D; --t-fria : #B8C4CA; --focus : #D81B60; /* superfície da ação principal e do que está selecionado. No claro é a laje escura; no escuro inverte pra clara — senão o botão primário fica da mesma cor do cartão e some. */ --acao : #131A20; --acao-fg : #FFFFFF; /* Texto que fica EM CIMA de um preenchimento de destaque. No claro é branco. No escuro os destaques sobem de luminância pra aparecer no fundo escuro — e aí branco em cima deles cai pra 2,1:1. Quem inverte é o texto, não a cor da marca. */ --sobre-heat: #FFFFFF; --sobre-go : #FFFFFF; --sobre-plum: #FFFFFF; --sh-1: 0 1px 2px rgba(19,26,32,.05); --sh-2: 0 1px 2px rgba(19,26,32,.04), 0 6px 16px -8px rgba(19,26,32,.14); --sh-3: 0 2px 6px rgba(19,26,32,.06), 0 18px 40px -14px rgba(19,26,32,.28); --brilho: rgba(255,255,255,.7); /* realce interno no topo dos cards */ } /* ============================================================= TEMA ESCURO — desenhado à parte, não invertido. O cinza-azulado da marca é mantido; heat e go sobem de luminância porque #D81B60 e #0F766E somem sobre fundo escuro. ============================================================= */ :root[data-tema="escuro"]{ color-scheme: dark; --bg : #0F151A; --bg-sunk : #0A0F13; --card : #171F26; --card-2 : #1D262E; --fg : #E9EFF2; --fg-2 : #9AAAB5; --fg-3 : #6E7F8A; --edge : #28333C; --edge-2 : #202A32; /* no escuro a laje sobe em vez de descer — senão some no fundo */ --slab : #1D262E; --slab-2 : #26313A; --slab-fg : #F2F6F8; --slab-fg-2: #9AAAB5; --slab-edge: #333F49; --heat : #FF5C90; --heat-fg : #FF80A9; --heat-laje: #FF5C90; --heat-soft: #3A1523; --heat-edge: #5A2038; --go : #2BC5B4; --go-fg : #45D6C6; --go-soft : #0D2E2B; --go-edge : #164740; --warn : #E9A24C; --warn-fg : #F0B368; --warn-soft: #33230F; --warn-edge: #4E3818; --cool : #5B8BFF; --verde : #4ADE80; --plum : #A882F5; --plum-soft: #2A1D47; --live : #3DDC97; --danger : #5E2323; /* No escuro a rampa clareia rumo ao fechamento, em vez de escurecer: descer de luminância sobre fundo escuro apaga a etapa final. */ --funil-1 : #8C2D4C; --funil-2 : #B7275E; --funil-3 : #DA3474; --funil-4 : #EC5C93; --funil-5 : #FF93B7; --grade : #232E36; /* no escuro o --heat-soft chapado vira um bloco vinho no cartão: uma lavagem translúcida lê como preenchimento, não como caixa */ --fundo-demanda: linear-gradient(90deg, rgba(255,92,144,.16), rgba(255,92,144,.02)); --t-quente : #FF5C90; --t-morna : #E8A33D; --t-fria : #5C6B75; --focus : #FF5C90; --acao : #E9EFF2; --acao-fg : #0F151A; --sobre-heat: #2A0512; --sobre-go : #04231F; --sobre-plum: #1A1030; --sh-1: 0 1px 2px rgba(0,0,0,.40); --sh-2: 0 2px 4px rgba(0,0,0,.30), 0 8px 20px -8px rgba(0,0,0,.50); --sh-3: 0 4px 10px rgba(0,0,0,.40), 0 22px 48px -16px rgba(0,0,0,.65); --brilho: rgba(255,255,255,.045); }