/* ========================================================================== TOKENS — a unica fonte de verdade de cor, espaco, raio e tipografia. Nenhum outro arquivo deve escrever um valor de cor "cru" (#hex). Se voce precisa de uma cor nova, ela nasce aqui. ------------------------------------------------------------------------ A ESCADA Nao existe "cinza" neste sistema. Existe BRANCO COM ALFA, em degraus fixos, sobre um chao tingido — e cada degrau tem um trabalho. Superficie e tinta correm em duas escadas paralelas, e nada fora delas e permitido: SUPERFICIE TINTA --n-1 2,2% painel --t-1 95% numero, titulo --n-2 4,5% cartao --t-2 62% texto, rotulo de linha --n-3 7,5% peca, ativo --t-3 48% unidade, meta, contexto --n-4 12% medida --t-4 32% regua, divisoria, apagado branco 100% a acao Por que assim: sobre um fundo escuro, alfa EMPILHA. Um cartao de 4,5% dentro de um painel de 2,2% da 6,7%, e a leitura de profundidade nasce sozinha, sem uma borda sequer. E por isso que a tela inteira tem quase nenhuma linha e mesmo assim se sabe o que esta dentro do que. ------------------------------------------------------------------------ A COR UMA, e ela e o CHAO. Um azul-petroleo profundo cobre a tela inteira — ceu, torres, bruma (assets/img/cena.svg). Nada NA INTERFACE e colorido: tudo e branco com alfa por cima de um ambiente tingido. Isso e diferente de ter cor de destaque, e e o que faz o sistema nao ter neon nenhum. A UNICA excecao e --alarme. Vermelho existe para uma coisa so: parou, ou vai parar. Verde, amarelo e azul de status foram embora — o que eles diziam agora se diz por OPACIDADE e por forma, que e o mesmo recurso do resto do sistema. ------------------------------------------------------------------------ OS DOIS TEMAS Escuro e a noite; claro e o dia — outra hora, nao a mesma clareada. Quem escolhe e o `data-theme` do , carimbado por tema_script() (lib/helpers.php) antes da primeira pintura. ------------------------------------------------------------------------ OS NOMES ANTIGOS base.css, layout.css e components.css continuam pedindo --card, --border, --text-2, --surface-3. Eles nao precisam saber que a escada existe: no fim do bloco cada nome antigo aponta para um degrau dela. Renomear trezentas ocorrencias so para trocar de paleta seria trocar um risco de cor por um risco de regressao. ========================================================================== */ :root { color-scheme: dark; /* --- o chao ------------------------------------------------------------ */ /* Quase neutro: o azul anda tres pontos a frente do vermelho, e mais nada. Interface sem cor nenhuma nao pode ter o chao puxando para o petroleo — ai o fundo vira a cor da marca sem ninguem ter escolhido. */ --pedra: #070a0c; --branco: #ffffff; /* a acao — o unico opaco */ --cena: url('../img/cena.svg'); /* --- a escada de superficie -------------------------------------------- */ --n-1: rgba(255, 255, 255, 0.028); --n-2: rgba(255, 255, 255, 0.062); --n-3: rgba(255, 255, 255, 0.1); --n-4: rgba(255, 255, 255, 0.16); /* o rebaixo: calha de barra, fundo de campo. Controle e cavado, nao aplicado — e cavando ele o preenchimento tem contraste de sobra mesmo sendo fraco. */ --cava: rgba(0, 0, 0, 0.14); /* --- a escada de tinta -------------------------------------------------- */ --t-1: rgba(255, 255, 255, 0.95); --t-2: rgba(255, 255, 255, 0.62); --t-3: rgba(255, 255, 255, 0.48); --t-4: rgba(255, 255, 255, 0.32); /* --- linhas ------------------------------------------------------------ --l-0 e o fio de dentro: o separador entre irmaos de uma mesma lista, que so precisa dizer "aqui acaba um e comeca o outro". Ele e mais fraco que --l-1 de proposito — --l-1 e a linha que separa PECAS (cartao, coluna, cabecalho), e quando as duas tinham o mesmo peso a lista lia como varias caixas empilhadas em vez de uma lista. */ --l-0: rgba(255, 255, 255, 0.042); --l-1: rgba(255, 255, 255, 0.075); --l-2: rgba(255, 255, 255, 0.14); --l-3: rgba(255, 255, 255, 0.26); /* --- o vidro ----------------------------------------------------------- O cartao ESCURECE o que esta atras, nao clareia: um fio de branco na primeira faixa (a luz raspando a quina de cima) e escuro do resto para baixo. Branco por dentro deixa o cartao mais claro que a tela, e ai ele para de parecer translucido. */ --vidro: linear-gradient(163deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.05) 26%, rgba(0, 0, 0, 0.15) 100%); --blur: 2.5px; /* POUCO: quem quebra a imagem e a refracao, nao o borrao */ --blur-alto: 5px; /* barra que gruda no topo, com conteudo passando por baixo */ /* O FIO DE LUZ. Existe UMA fonte nesta tela, no alto a direita — a mesma que acende o ceu da cena. Entao o fio nao da a volta na peca: acende na quina virada para a luz e apaga ao contornar, com um respiro na quina oposta (o reflexo que atravessa a chapa e sai do outro lado). A faixa entre aceso e apagado e o ajuste fino de tudo: 4 para 1. Mais do que isso e um risco branco de um lado e nada do outro — duas bordas diferentes na mesma peca. */ --fio: linear-gradient(215deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.13) 14%, rgba(255, 255, 255, 0.075) 32%, rgba(255, 255, 255, 0.052) 56%, rgba(255, 255, 255, 0.058) 80%, rgba(255, 255, 255, 0.078) 100%); /* Peca pequena reflete menos: superficie curta, fio fraco. */ --fio-curto: linear-gradient(215deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.09) 16%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.038) 66%, rgba(255, 255, 255, 0.055) 100%); /* --- o alarme — a unica cor da interface -------------------------------- */ --alarme: #c9575c; --alarme-bg: rgba(201, 87, 92, 0.14); /* --- as duas cores do MOVE-IN — a excecao, e ela e estreita ------------- A regra da casa continua valendo em todo o resto: status e degrau de opacidade, nao cor. Aqui ela abre para dois estados, e por um motivo que nao vale para o funil nem para a cobranca: quem le esta escada nao e a equipe, e o inquilino — uma pessoa que entra no portal tres vezes no mes inteiro, nao tem o vocabulario do sistema decorado e precisa saber em um olho se o que ele mandou passou ou voltou. Cinza claro contra cinza medio e uma diferenca que so quem usa a tela todo dia aprende a ler. Sao DUAS, e nao uma paleta: aprovado e em analise. Com o alarme que ja existia, fecham o unico trio que o portal precisa dizer — passou, esta olhando, voltou. Nada alem disso ganha cor. Saturacao baixa de propósito, na mesma faixa do alarme: elas convivem com vidro e penumbra, e um verde de semaforo aqui seria a unica coisa viva na tela inteira. */ --aprovado: #5f9e78; --aprovado-bg: rgba(95, 158, 120, 0.14); --analise: #c9903f; --analise-bg: rgba(201, 144, 63, 0.14); /* --- Raio ------------------------------------------------------------- */ --r-sm: 8px; --r-md: 8px; --r-lg: 14px; --r-xl: 16px; --r-full: 999px; /* --- altura dos controles ---------------------------------------------- TRES DEGRAUS, E NENHUM NUMERO SOLTO FORA DELES. Botao, campo, chip, menu e segmentado que dividem uma linha tem que ter a mesma altura. O sistema tinha sete alturas escritas a mao (22, 24, 26, 28, 32, 34, 42) e ninguem sabia dizer qual era a certa: na barra de filtros a busca vinha 42, os chips 34 e o seletor de formato 34, e a linha lia como desalinhada sem que se pudesse apontar a peca errada. --ctl-sm acao dentro de linha de lista ou de tabela --ctl o padrao: formulario, cabecalho de secao, botao de acao --ctl-lg a linha de comando de uma listagem: busca + filtros + ordem SO O DEGRAU DE CIMA DESCEU. --ctl-sm e --ctl estao nos valores de sempre (28 e 34): botao de formulario, campo de modal e chip de cabecalho nao tinham problema nenhum de altura, e encolher os tres degraus de uma vez apertou tela que ninguem pediu para apertar — a de taxas, entre elas. --ctl-lg foi de 42 para 36, e ele governa exatamente uma coisa: a linha de comando das listagens. Busca, chips de filtro, "+ Filtro", o seletor de formato e o Sort. Era ali que a caixa estava alta demais. Os 8px que o .segmented.is-lg gasta com padding e borda saem por subtracao la na regra dele (calc(var(--ctl-lg) - 8px)), e nao por um numero repetido aqui: assim este degrau se move sozinho sem desmontar a barra. */ --ctl-sm: 28px; --ctl: 35px; --ctl-lg: 36px; /* --- Escala de espaco (multiplos de 4) --------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* --- A DENSIDADE ------------------------------------------------------- TRES MEDIDAS, e elas dizem a mesma coisa em toda a tela: o respiro de uma LINHA de lista, o respiro de um BLOCO (a margem interna do cartao, da topbar, da coluna) e o vao entre duas SECOES. Elas nasceram porque cada uma estava escrita a mao em lugares que deveriam concordar e nao concordavam: a linha da tabela vinha 15px, a mesma linha em .record vinha 12, e as duas sao a mesma linha de lista. Com nome, mexer na densidade da tela e mexer em tres numeros aqui. --gap-sec e o unico fora da grade de 4, e e de proposito: 24 encosta o titulo da secao seguinte no fim da anterior, e 28 abre um buraco que faz a pagina parecer meio vazia. O valor foi afinado no olho. */ --pad-row: var(--s-3); --pad-blk: var(--s-5); --gap-sec: 26px; /* --- Tipografia -------------------------------------------------------- DUAS letras, e a segunda aparece uma vez por tela. Inter faz tudo: texto, numero, e o rotulo maiusculo (que e Inter pequeno com entreletra aberta, e nao uma mono). Archivo e Plex Mono sairam — a personalidade agora vem do material e do vazio, nao de tres desenhos de letra disputando a mesma tela. Fraunces e a frase que o sistema DIZ a quem abriu: "Dois a frente do ritmo", "Confira seu e-mail". Rotulo, numero e tabela nunca — serifa em dado e enfeite. */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --serifa: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* OS DOIS PESOS QUE O SISTEMA USA, e agora eles tem nome. Estavam espalhados como numero cru e discordavam entre si: o titulo de secao vinha 600 do components.css, o cabecalho de coluna 400 do skin.css, e os dois sao o MESMO rotulo em caixa alta. Com nome, os dois andam juntos. O rotulo pesa MAIS que o nome, e nao e engano: em 10px com 0,13em de entreletra, 400 se desmancha; o nome, em 13px, nao precisa de peso para ser lido. Quem carrega hierarquia aqui e o TAMANHO, e o peso vai para onde o tamanho nao chega. */ --fw-label: 500; --fw-nome: 400; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; /* O TAMANHO DO CORPO, e ele tem nome proprio porque quase ninguem o declara: a celula de tabela, o paragrafo solto e todo texto sem classe herdam DAQUI. Era por isso que a listagem lia 14px enquanto o resto da tela — que declara --fs-13 na regra — lia 13: os dois nunca discordaram de proposito, so que um deles nao tinha onde ser escrito. */ --fs-base: var(--fs-13); /* --- Sombra ------------------------------------------------------------ LEVE. A separacao entre o cartao e o fundo vem da escada de opacidade — do fundo ser escuro e o cartao ser um degrau acima —, e nao de um borrao preto por baixo. Sombra pesada e o que se usa quando as superficies estao perto demais; aqui elas nao estao. */ --shadow-sm: 0 1px 3px -2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 20px -14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 36px -26px rgba(0, 0, 0, 0.6); /* --- Medidas do shell -------------------------------------------------- */ --sidebar-w: 228px; --sidebar-rail: 56px; --topbar-h: 58px; --imp-bar-h: 34px; --shell-pad: 0px; --content-max: 1360px; /* --- Transicao --------------------------------------------------------- */ --t-fast: 0.15s ease; --t-med: 0.22s ease; /* ====================================================================== OS NOMES ANTIGOS — cada um apontando para um degrau da escada. ====================================================================== */ --bg: transparent; /* quem pinta o fundo e a cena */ --void: var(--pedra); --panel: var(--n-1); --card: var(--n-2); --surface-2: var(--n-2); --surface-3: var(--n-3); --overlay: rgba(2, 8, 12, 0.66); --border: var(--l-1); --border-strong: var(--l-2); --text: var(--t-1); --text-2: var(--t-2); --text-3: var(--t-3); --text-4: var(--t-4); --action: var(--branco); --action-hover: rgba(255, 255, 255, 0.86); --action-fg: var(--pedra); /* O anel de foco. No escuro ele e a propria acao — branco puro, o mais claro que existe. Ele ganhou nome proprio porque no dia ele deixa de acompanhar --branco: la a acao virou azul e a tinta virou preta, e o anel segue a acao, nao a tinta. */ --foco: var(--branco); /* O destaque virou BRANCO. Ele continua querendo dizer "da para agir aqui", so que agora diz isso por luz, e nao por cor. */ --accent: var(--branco); --accent-ink: var(--t-1); --accent-fg: var(--pedra); --accent-soft: rgba(255, 255, 255, 0.08); --accent-line: rgba(255, 255, 255, 0.24); --accent-glow: rgba(255, 255, 255, 0.16); /* Status sem cor: o que era verde/amarelo/azul virou degrau de opacidade. Vermelho fica, porque "expirou" e "o pagamento falhou" precisam alarmar e um cinza nao alarma. */ --ok: var(--t-1); --ok-bg: rgba(255, 255, 255, 0.09); --warn: var(--t-2); --warn-bg: rgba(255, 255, 255, 0.06); --info: var(--t-2); --info-bg: rgba(255, 255, 255, 0.06); --neutral: var(--t-3); --neutral-bg: rgba(255, 255, 255, 0.05); --danger: var(--alarme); --danger-bg: var(--alarme-bg); --glass: var(--n-2); --glass-2: var(--n-3); --glass-edge: var(--l-1); --glass-edge-2: var(--l-2); --glass-hi: rgba(255, 255, 255, 0.55); --blur-lg: var(--blur-alto); --field: var(--cava); --field-2: rgba(0, 0, 0, 0.2); --field-border: var(--l-1); --font-display: var(--font); --font-label: var(--font); --luz-fria: #2b5764; --luz-quente: #2b5764; --luz-forca: 0%; } /* ========================================================================== TEMA CLARO — o dia O chao e um BRANCO FRIO e a peca e BRANCO PURO. A distancia entre os dois e minima de proposito (1,07:1) — quem separa a caixa do chao nao e a cor, e a SOMBRA. Esse e o eixo inteiro do esquema, e e o que o distingue das tentativas anteriores, que tentaram fazer a diferenca por tom e acabaram com uma mancha colorida cobrindo a tela. AS QUATRO REGRAS 1. CHAO #f6f7fa, CAIXA #ffffff. Sao quase a mesma cor, e tem que ser: o chao cobre a maior parte da tela, e todo ponto de tom que ele ganha vira uma mancha na tela inteira. Nao existe caixa cinza neste esquema. 2. QUEM SEPARA E A SOMBRA. O cartao nao tem contorno — --card-border e branco, igual ao proprio cartao. Com o chao tao perto do branco, a sombra e a UNICA coisa que desenha a peca, e por isso ela e mais forte aqui do que seria em qualquer esquema de fundo tingido. 3. A LINHA SOBRE O CHAO E ESCURA, A LINHA DENTRO DA PECA E CLARA. --l-1 (#ebebeb) corre sobre o chao: divisao entre as colunas, linha sob a topbar, regua da listagem de largura cheia. --l-0 (#eef0f1) corre dentro do cartao branco. As duas sao proximas e nao intercambiaveis: a de fora precisa vencer o chao, a de dentro nao pode riscar o branco. 4. A COLUNA DA DIREITA NAO E UMA CAIXA. Ela se apoia no chao e o unico desenho dela e o fio da esquerda. Mesma coisa para a listagem de largura cheia: ela nao mora dentro de cartao nenhum. O RESTO CONTINUA COMO SEMPRE: sem cena atras, o borrao sai (custa GPU para nao mudar um pixel) e o vidro deixa de clarear e vira chapa — sobre chao claro, branco translucido nao existe. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; /* --------------------------------------------------------------------- A PALETA, EM UM BLOCO SO. Estes nomes sao a fonte; tudo abaixo deles e ligacao. Trocar o esquema claro e mexer aqui e em mais lugar nenhum — a escada, os nomes antigos e os controles saem todos daqui por var(). --------------------------------------------------------------------- */ --page-bg: #fafafa; --card-bg: #ffffff; /* A borda do cartao E o proprio cartao. Nao e descuido: e a regra 2 escrita como valor. O nome existe apontando para branco para que ligar a borda de volta seja mudar UMA linha. */ --card-border: #ffffff; --divider: #f1f1f2; /* A linha que corre sobre o CHAO. Ela e um token proprio porque nao e nem a borda do cartao (invisivel) nem a divisoria de dentro (clara demais para vencer o chao). */ --linha-chao: #e9e9ea; /* A COLUNA DA DIREITA E A TOPBAR TEM FUNDO PROPRIO. Ate aqui as duas se apoiavam no chao e nao eram nada — a coluna era "a que nao e caixa". Agora ela E uma caixa: branca sobre o chao quase branco, separada por um fio. Dar nome as quatro e o que permite mexer numa sem mexer na outra. */ --side-bg: #ffffff; --side-border: #e9e9ea; --topbar-bg: #fafafa; --topbar-border:#e9e9ea; --text-primary: #444444; --text-secondary: #4f575d; --text-3: #626a70; --text-muted: #606060; --btn-primary-bg: #1d5c7a; --btn-primary-hover: #17475e; --btn-primary-text: #eaf2f5; --btn-secondary-bg: #ffffff; --btn-secondary-border:#dcdcde; --input-bg: #ffffff; --input-border: #dcdcde; --focus-ring: #1d5c7a; /* O MENU DO TEMA CLARO E O MESMO DO ESCURO, EM OUTRA LUZ. Aqui a sidebar continua escura de proposito — e o que ancora a tela quando o resto e quase branco. Mas ela estava num navy (#0e1c24) com o ativo num azul (#234555), e ao lado do #070a0c do tema escuro aquilo nao lia como a mesma peca: lia como outra peca. O fundo desceu para um quase-preto com um resto de frio, e o ativo virou um degrau de cinza em cima dele — que e o que o escuro faz com 10% de branco sobre a pedra. Os cinzas de texto sairam do azul-acinzentado junto, pelo mesmo motivo. */ --sidebar-bg: #0b1013; --sidebar-item-active:#1e262b; --sidebar-text: #e9eef0; --sidebar-text-muted: #808c92; --success: #1f7a5c; --danger-c: #b23a34; --warning: #a8700f; /* --- o chao e a tinta -------------------------------------------------- */ --pedra: var(--page-bg); /* --branco e "a acao" — o unico opaco do tema escuro. Aqui ele e tinta: e o que pinta o risco da linha clicavel e o ponto de status. */ --branco: var(--text-primary); /* O DIA NAO TEM CENA. Com o chao liso, a cidade atras do vidro deixou de ter o que fazer: ela existia para o vidro ter o que refratar, e nao ha mais vidro aqui — ha chapa. Ver o override de .cena::after em glass.css, que apaga o veu junto. */ --cena: none; /* --- a escada de superficie --------------------------------------------- --n-1 e OPACO e e o proprio chao: ele veste o painel de conteudo, a topbar, a coluna do quadro e a calha do segmentado. Os quatro sao o fundo da tela, e fundo nao empilha por acidente. --n-2 para cima continuam sendo ALFA, e por um motivo que so aparece no uso: eles sao os degraus de HOVER e de ATIVO, e precisam funcionar sobre o chao E sobre o cartao branco. Um hex chapado acerta um dos dois e some no outro — e aqui os dois estao a 1,07:1 um do outro, entao um hover chapado nao teria como servir aos dois. O alfa e do AZUL DA ACAO, e nao de um preto neutro: e ele que amarra o realce ao botao principal. Num chao quase branco isso aparece pouco, e e exatamente o que se quer — o hover diz "da para clicar", nao "aqui tem cor". */ --n-1: var(--page-bg); --n-2: rgba(29, 92, 122, 0.07); --n-3: rgba(29, 92, 122, 0.13); --n-4: rgba(29, 92, 122, 0.22); /* o rebaixo: calha de barra e de medidor. Continua cavado na peca que o segura, entao continua sendo alfa. */ --cava: rgba(29, 92, 122, 0.12); /* --- a escada de tinta -------------------------------------------------- Tres niveis da paleta em quatro degraus: --t-3 e o que sobra. Esta e a versao mais legivel que este tema ja teve. --t-3 veste o rotulo de 10px em CAIXA ALTA (titulo de secao, rotulo de KPI, cabecalho de coluna) e esta em 5,48:1 sobre a caixa — antes estava em 4,46:1, e foi esse degrau que uma vez ja apagou a linha de titulo das colunas. --t-4 e o --text-muted e esta em 3,05:1. Continua abaixo de AA para texto pequeno, mas e o melhor numero que este degrau ja teve no sistema (era 2,65:1 em todas as versoes anteriores). */ --t-1: var(--text-primary); --t-2: var(--text-secondary); --t-3: var(--text-3); --t-4: var(--text-muted); /* --- linhas ------------------------------------------------------------ A REGRA 3 MORA AQUI, e ela e a razao de --l-0 e --l-1 serem valores diferentes e proximos: --l-1 (#ebebeb) e a linha de PECA e corre SOBRE O CHAO — o fio entre a coluna do meio e a da direita, a linha sob a topbar, a regua entre linhas de uma listagem de largura cheia. Ela precisa vencer o chao. --l-0 (#eef0f1) e o fio de DENTRO, sobre o branco do cartao. Ele e mais claro de proposito: --l-1 usado ali dentro riscaria a peca a cada linha, e uma lista de oito itens leria como oito caixas empilhadas. O glass.css tem uma regra so que manda toda divisoria de dentro de peca para ele. --l-2 e a borda dos CONTROLES — campo, botao secundario, chip. Ela e a mais escura da familia, e de proposito: com o cartao sem contorno, a borda passa a significar exatamente uma coisa — "isto se opera". */ --l-0: var(--divider); --l-1: var(--linha-chao); --l-2: var(--input-border); --l-3: #c2c2c4; /* CHAPA LISA, NAO VIDRO. Os dois continuam sendo gradiente porque e assim que glass.css os usa — um como `background` do cartao, o outro como `background` do ::before mascarado que desenha o aro de 1px. Mesma cor nas duas paradas: o gradiente vira cor chapada. O --fio sai em BRANCO, ou seja, o aro do cartao existe e nao aparece: e a regra 2. */ --vidro: linear-gradient(0deg, var(--card-bg) 0%, var(--card-bg) 100%); --fio: linear-gradient(0deg, var(--card-border) 0%, var(--card-border) 100%); /* O aro das pecas PEQUENAS continua visivel, e e a excecao da regra 2: um botao de 28px nao tem area para se separar por sombra, e sombra em peca pequena e o que faz interface parecer de 2012. Ele fica na borda de controle. */ --fio-curto: linear-gradient(0deg, var(--input-border) 0%, var(--input-border) 100%); /* Sem cena atras, borrar custa GPU para nao mudar um pixel. */ --blur: 0px; --blur-alto: 0px; --alarme: var(--danger-c); --alarme-bg: rgba(178, 58, 52, 0.1); /* As duas cores do MOVE-IN saem das semanticas da paleta. No claro elas descem de luminosidade: sobre fundo claro o mesmo verde do escuro vira um borrao sem contraste no texto de 11px do badge. */ --aprovado: var(--success); --aprovado-bg: rgba(31, 122, 92, 0.1); --analise: var(--warning); --analise-bg: rgba(168, 112, 15, 0.1); /* REGRA 2 — A SOMBRA E QUEM SEPARA, E AQUI ELA TRABALHA SOZINHA. Com a caixa a 1,04:1 do chao, nao ha tom para ajudar: tirando a sombra, o cartao desaparece. Ela ficou em 0,15 com 10px de alcance — mais curta e mais fraca do que a versao anterior (0,30 em 16px), o que troca o descolamento por um assentamento. E uma peca pousada, nao levantada. Duas camadas em todas: 1px de ASSENTAMENTO (a peca tocando o chao, sem desfoque) e um halo curto e muito aberto por baixo. A primeira faz a quina existir; a segunda da o descolamento. Uma camada so, nesta opacidade, vira sujeira cinza em volta da peca. Os tres degraus mudam so o alcance do halo — nunca a cor nem a primeira camada —, para uma peca pequena e um modal parecerem estar na mesma sala. */ --shadow-sm: 0 1px 2px rgba(14, 28, 36, 0.068); --shadow-md: 0 1px 2px rgba(14, 28, 36, 0.068), 0 3px 7px -4px rgba(14, 28, 36, 0.12); --shadow-lg: 0 1px 2px rgba(14, 28, 36, 0.068), 0 4px 10px -5px rgba(14, 28, 36, 0.15); /* Veu ESCURO sobre a pagina clara. Um veu claro sobre chao quase branco nao separa o modal de nada — some junto com o fundo que deveria apagar. */ --overlay: rgba(14, 28, 36, 0.28); /* --------------------------------------------------------------------- A AGUA — a unica cor da interface no dia. Ela nao tinge superficie: aparece so onde "da para agir". Botao principal, item ativo do rail, marca, avatar da conta, anel de foco. Rampa monotonica em luminosidade, verificada. Os tres passos claros NAO servem de marca sozinhos no claro (1,1 / 1,4 / 2,1 : 1) — quando aparecem, aparecem sobre o rail escuro, onde entregam 15,3 / 12,4 / 8,1 : 1. Os tres escuros carregam sentido sozinhos: 3,8 / 7,3 / 10,0 : 1. --------------------------------------------------------------------- */ --agua-1: #eaf2f5; --agua-2: #cbdde4; --agua-3: #93b7c4; --agua-4: #4c8aa6; --agua-5: var(--btn-primary-bg); --agua-6: var(--btn-primary-hover); --action: var(--btn-primary-bg); --action-hover: var(--btn-primary-hover); --action-fg: var(--btn-primary-text); --accent: var(--btn-primary-bg); --accent-ink: var(--btn-primary-bg); --accent-fg: var(--btn-primary-text); --accent-soft: rgba(29, 92, 122, 0.09); --accent-line: rgba(29, 92, 122, 0.24); --accent-glow: rgba(29, 92, 122, 0.16); /* O ANEL DE FOCO SAI DA ACAO, E NAO DA TINTA. No escuro ele e --branco, o mesmo opaco do botao principal. Aqui --branco virou tinta quase preta, e um anel preto em volta de um campo branco le como borda grossa, nao como foco. */ --foco: var(--focus-ring); /* --- o rail: a unica massa escura do dia ------------------------------- */ --rail: var(--sidebar-bg); --rail-2: var(--sidebar-item-active); --rail-fio: rgba(255, 255, 255, 0.09); --rail-t1: var(--sidebar-text); --rail-t2: var(--sidebar-text-muted); /* O terceiro degrau do rail nao vem da paleta — ele veste o titulo de grupo do menu, que e 11px em caixa alta. Um passo abaixo do apagado, e ainda em 4,1:1 sobre o rail. */ --rail-t3: #6d787e; /* --- O PAINEL E O CAMPO ------------------------------------------------- --card SAI DA ESCADA e vira branco puro. Ele e o unico apelido antigo que muda de natureza neste esquema, e a razao e que ele tem DOIS trabalhos no sistema: em `.card`, `.kpi`, `.modal`, `.menu`, `.fee-table` e `.board-card` ele e A PECA; em hover e estado ativo ele seria um degrau de tinta. Quem ficou com o segundo trabalho foi --surface-2, que continua apontando para --n-2 la no :root e por isso continua sendo alfa. Separar os dois aqui evita reescrever trinta seletores — e a mesma economia que fez os apelidos existirem. */ --card: var(--card-bg); --field: var(--input-bg); --field-2: var(--input-bg); --field-border: var(--input-border); /* Status sem cor continua valendo: o que era verde/amarelo/azul de estado e degrau de opacidade, e a cor fica para o alarme e para as duas do move-in. */ --ok: var(--t-1); --ok-bg: rgba(29, 92, 122, 0.1); --warn: var(--t-2); --warn-bg: rgba(29, 92, 122, 0.07); --info: var(--t-2); --info-bg: rgba(29, 92, 122, 0.07); --neutral: var(--t-3); --neutral-bg: rgba(29, 92, 122, 0.06); } /* Enquanto o tema troca, tudo que tem cor faz a passagem junto — sem isso a tela pisca em pedacos, cada elemento chegando na hora dele. A classe sai do logo depois (tema.js), para a transicao nao pegar hover e foco do uso normal. */ :root.tema-trocando, :root.tema-trocando *, :root.tema-trocando *::before, :root.tema-trocando *::after { transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, fill 0.22s ease, box-shadow 0.22s ease !important; }