/* ═══════════════════════════════════════════════════════════════════════════
fion Design System · versão 2 · Fiorente
Fonte única de cor, tipografia, forma e movimento.
COMO USAR
@import "caminho/ate/fion-design-system/v2/tokens.css";
e depois só use os nomes da CAMADA 2 nos seus componentes.
TRÊS CAMADAS
1 · Primitiva o valor cru. Nenhuma tela usa direto.
2 · Semântica o papel na página. É onde o tema troca.
3 · Componente a medida da peça.
DOIS SOTAQUES
Escuro é o padrão, para ferramenta e sistema interno.
Claro é o sotaque do documento, do PDF e do material impresso.
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────
FONTES
Degular é variável: um arquivo cobre da espessura 200 à 800.
─────────────────────────────────────────────────────────────── */
@font-face{
font-family:"Degular";
src:url("./fontes/degular-latin.woff2") format("woff2");
font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Instrument Sans";
src:url("./fontes/instrument-sans-latin.woff2") format("woff2");
font-weight:400 700; font-style:normal; font-display:swap;
}
/* ═══════════════════════════════════════════════════════════════
CAMADA 1 · PRIMITIVAS
Valores crus. Nenhum componente aponta para cá.
═══════════════════════════════════════════════════════════════ */
:root{
/* Lima · a cor da marca.
Os degraus são passos de clareza percebida pelo olho, não divisão
matemática: a distância do 100 ao 200 parece igual à do 800 ao 900. */
--lima-50:#EAFFDC;
--lima-100:#C8FF9C;
--lima-200:#AFEE77;
--lima-300:#92D452;
--lima-400:#78B23D;
--lima-500:#5E9128;
--lima-600:#477312;
--lima-700:#335800;
--lima-800:#223F00;
--lima-900:#122700;
--lima-950:#041300;
/* Grafite · fundos, texto e linhas.
Um preto que respira verde, não um cinza de prateleira. */
--grafite-50:#F4F8F1;
--grafite-100:#E9EDE6;
--grafite-200:#D5D9D2;
--grafite-300:#BBBFB9;
--grafite-400:#9CA099;
--grafite-450:#8B8F88; /* nasceu para o texto de apoio passar contraste no escuro, no fundo e no card */
--grafite-500:#7E817B;
--grafite-600:#626660;
--grafite-700:#4A4D47;
--grafite-800:#333731;
--grafite-900:#1F211D;
--grafite-950:#0D0F0B;
/* Verde-mata · a única cor fora de régua, e por decisão registrada.
A régua da lima escurecida produz oliva, que não serve para letra
sobre papel. Ele existe só como tinta de link no sotaque claro. */
--mata:#087736;
--branco:#FFFFFF;
/* Situação · nunca é cor de marca, de propósito.
Cada uma tem dois valores: o claro serve no sotaque escuro, o escuro
serve no claro. Todos passam 4,5 para 1 contra o fundo em que vivem,
que é o mínimo para texto. Nenhum deles é verde-lima, senão a cor da
marca passaria a significar duas coisas ao mesmo tempo. */
--coral-claro:#F17264; --coral-escuro:#AB4238; /* atrasado, erro */
--ambar-claro:#F2A618; --ambar-escuro:#8D5E01; /* esperando alguém */
--teal-claro:#2ED3A2; --teal-escuro:#167C5D; /* concluído, deu certo */
--azul-claro:#64C7FF; --azul-escuro:#2075A3; /* informação, aviso neutro */
--roxo-claro:#8B7CFF; --roxo-escuro:#695DD8; /* estratégia, plano */
/* Série de gráfico · nem marca, nem situação.
Cinco matizes bem espaçados, para o olho separar uma série da outra
sem depender de legenda. Nenhum deles cai perto do verde-lima, senão
a série pareceria a cor da marca. Cada um passa 3 para 1 contra o
fundo em que vive, que é o mínimo para forma grande: barra, fatia e
linha não são texto.
A ordem importa: quem tem duas séries usa a 1 e a 2, que são as mais
distantes entre si. */
--grafico-1-claro:#3083CF; --grafico-1-escuro:#3083CF; /* azul */
--grafico-2-claro:#CF4330; --grafico-2-escuro:#CF4330; /* vermelho */
--grafico-3-claro:#CFA230; --grafico-3-escuro:#B68F2B; /* ocre */
--grafico-4-claro:#9F37D0; --grafico-4-escuro:#9C30CF; /* roxo */
--grafico-5-claro:#30CF9F; --grafico-5-escuro:#27A781; /* verde-água */
/* Tipografia */
--fonte-titulo:"Degular","Instrument Sans",system-ui,sans-serif;
--fonte-corpo:"Instrument Sans",system-ui,-apple-system,sans-serif;
/* Movimento */
--curva-saida:cubic-bezier(.16,1,.3,1); /* entrada e troca de estado */
--curva-mola:cubic-bezier(.32,.72,0,1); /* arrastar, abrir, a semente do botão */
--tempo-toque:120ms;
--tempo-estado:220ms;
--tempo-entrada:320ms;
--tempo-longo:500ms;
/* Forma */
--raio-pilula:999px; /* botão e etiqueta */
--raio-card:14px;
--raio-minimo:3px; /* grifo e código */
--borda-fina:1px;
--borda-grossa:2px;
/* Estrutura */
--largura:78rem;
--largura-leitura:65ch;
--margem:clamp(1.25rem,5.5vw,5.5rem);
/* Camadas de profundidade · decididas de uma vez, para nada brigar depois */
--nivel-conteudo:0;
--nivel-fixo:20;
--nivel-suspenso:40;
--nivel-dialogo:60;
--nivel-aviso:80;
--nivel-cursor:999;
/* Opacidades nomeadas */
--opacidade-desativado:.42;
--opacidade-linha:.09;
--opacidade-linha-forte:.16;
}
/* ═══════════════════════════════════════════════════════════════
CAMADA 2 · SEMÂNTICAS · sotaque ESCURO (padrão)
É aqui que o tema troca. Componente usa SÓ estes nomes.
═══════════════════════════════════════════════════════════════ */
:root{
color-scheme:dark;
--fundo:var(--grafite-950);
--fundo-2:#151813;
--card:var(--grafite-900);
--linha:rgba(255,255,255,.09);
--linha-forte:rgba(255,255,255,.16);
--texto:var(--grafite-100);
--texto-2:var(--grafite-400);
--texto-3:var(--grafite-450);
--destaque:var(--lima-100); /* bloco preenchido */
--destaque-toque:var(--lima-50); /* o mesmo, um degrau adiante */
--sobre-destaque:var(--grafite-950); /* o que se escreve em cima do bloco */
--destaque-tinta:var(--lima-100); /* letra e link */
--destaque-lavado:rgba(200,255,156,.12);
--grifo-fundo:var(--lima-100);
--grifo-texto:var(--grafite-950);
--atrasado:var(--coral-claro);
--esperando:var(--ambar-claro);
--concluido:var(--teal-claro);
--informacao:var(--azul-claro);
--estrategia:var(--roxo-claro);
--serie-1:var(--grafico-1-claro);
--serie-2:var(--grafico-2-claro);
--serie-3:var(--grafico-3-claro);
--serie-4:var(--grafico-4-claro);
--serie-5:var(--grafico-5-claro);
--cursor-sobre-escuro:var(--lima-100);
--cursor-sobre-claro:var(--grafite-950);
}
/* ═══ CAMADA 2 · sotaque CLARO · documento, PDF, impresso ═══ */
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){
color-scheme:light;
--fundo:var(--grafite-50);
--fundo-2:var(--grafite-100);
--card:var(--branco);
--linha:var(--grafite-200);
--linha-forte:var(--grafite-300);
--texto:var(--grafite-900);
--texto-2:var(--grafite-700);
--texto-3:var(--grafite-600);
--destaque:var(--lima-200);
--destaque-toque:var(--lima-300);
--sobre-destaque:var(--grafite-900);
--destaque-tinta:var(--mata);
--destaque-lavado:rgba(175,238,119,.22);
--grifo-fundo:var(--lima-200);
--grifo-texto:var(--grafite-900);
--atrasado:var(--coral-escuro);
--esperando:var(--ambar-escuro);
--concluido:var(--teal-escuro);
--informacao:var(--azul-escuro);
--estrategia:var(--roxo-escuro);
--serie-1:var(--grafico-1-escuro);
--serie-2:var(--grafico-2-escuro);
--serie-3:var(--grafico-3-escuro);
--serie-4:var(--grafico-4-escuro);
--serie-5:var(--grafico-5-escuro);
--cursor-sobre-escuro:var(--lima-100);
--cursor-sobre-claro:var(--grafite-950);
}
}
:root[data-theme="light"]{
color-scheme:light;
--fundo:var(--grafite-50);
--fundo-2:var(--grafite-100);
--card:var(--branco);
--linha:var(--grafite-200);
--linha-forte:var(--grafite-300);
--texto:var(--grafite-900);
--texto-2:var(--grafite-700);
--texto-3:var(--grafite-600);
--destaque:var(--lima-200);
--destaque-toque:var(--lima-300);
--sobre-destaque:var(--grafite-900);
--destaque-tinta:var(--mata);
--destaque-lavado:rgba(175,238,119,.22);
--grifo-fundo:var(--lima-200);
--grifo-texto:var(--grafite-900);
--atrasado:var(--coral-escuro);
--esperando:var(--ambar-escuro);
--concluido:var(--teal-escuro);
--informacao:var(--azul-escuro);
--estrategia:var(--roxo-escuro);
--serie-1:var(--grafico-1-escuro);
--serie-2:var(--grafico-2-escuro);
--serie-3:var(--grafico-3-escuro);
--serie-4:var(--grafico-4-escuro);
--serie-5:var(--grafico-5-escuro);
--cursor-sobre-escuro:var(--lima-100);
--cursor-sobre-claro:var(--grafite-950);
}
/* ═══════════════════════════════════════════════════════════════
CAMADA 2b · APELIDOS EM INGLÊS
Um valor só, dois nomes. É o que os componentes prontos do
shadcn/ui procuram. Mudou a cor na camada 2, muda aqui junto.
═══════════════════════════════════════════════════════════════ */
:root{
--background:var(--fundo);
--foreground:var(--texto);
--card-background:var(--card);
--card-foreground:var(--texto);
--popover:var(--card);
--popover-foreground:var(--texto);
--primary:var(--destaque);
--primary-foreground:var(--sobre-destaque);
--secondary:var(--fundo-2);
--secondary-foreground:var(--texto);
--muted:var(--fundo-2);
--muted-foreground:var(--texto-3);
--accent:var(--destaque-lavado);
--accent-foreground:var(--destaque-tinta);
--destructive:var(--atrasado);
--destructive-foreground:var(--fundo);
--border:var(--linha);
--input:var(--linha-forte);
--ring:var(--destaque);
--radius:var(--raio-card);
/* Barra lateral. O shadcn trata a sidebar como superfície própria, para
ela poder destoar do resto sem virar exceção espalhada pelo código. */
--sidebar:var(--fundo-2);
--sidebar-foreground:var(--texto);
--sidebar-primary:var(--destaque);
--sidebar-primary-foreground:var(--sobre-destaque);
--sidebar-accent:var(--destaque-lavado);
--sidebar-accent-foreground:var(--destaque-tinta);
--sidebar-border:var(--linha);
--sidebar-ring:var(--destaque);
/* Gráfico */
--chart-1:var(--serie-1);
--chart-2:var(--serie-2);
--chart-3:var(--serie-3);
--chart-4:var(--serie-4);
--chart-5:var(--serie-5);
}
/* ═══════════════════════════════════════════════════════════════
CAMADA 3 · COMPONENTE
═══════════════════════════════════════════════════════════════ */
:root{
/* Botão */
--botao-altura:3.4rem;
--botao-altura-pequeno:2.75rem;
--botao-respiro:2.1rem;
--botao-corpo:.9375rem;
--botao-desliza:2.75rem;
--botao-semente:.32rem;
--botao-semente-pequena:.26rem;
--botao-nascente:1.3rem;
--botao-nascente-pequena:.9rem;
/* Cursor próprio */
--cursor-anel:34px;
--cursor-anel-acionavel:58px;
--cursor-anel-apertado:26px;
--cursor-ponto:7px;
/* Palavra em degradê */
--palavra-tamanho-minimo:2.5rem;
--palavra-angulo:96deg;
/* Barra do sistema */
--barra-altura:4rem;
--barra-altura-pequena:3.5rem;
--barra-respiro:clamp(1rem,3vw,2rem);
--barra-logo:7.5rem;
/* Alvo mínimo de toque. Nada clicável abaixo disso. */
--alvo-minimo:44px;
}
/* ═══════════════════════════════════════════════════════════════
MARCA · LOGOTIPO ADAPTÁVEL
marca/logo-fiorente.svg é um arquivo só, sem cor fixa dentro dele.
ATENÇÃO: se você exibir esse arquivo com 
, o
navegador trata o SVG como uma imagem fechada e a cor da página
NUNCA atravessa para dentro dele. currentColor dentro de um SVG
carregado por ![]()
sempre resolve para preto. É exatamente esse
engano que fez o logo sumir sobre fundo escuro.
A forma que funciona de verdade é usar o SVG como MÁSCARA: o
navegador usa o desenho só para decidir onde pintar, e quem pinta
é o background-color, que sim herda a cor da página.
USO
═══════════════════════════════════════════════════════════════ */
.logotipo{
display:inline-block;
width:12rem;
aspect-ratio:1001.94 / 154.72; /* a proporcao real do arquivo, 6,5 para 1 */
background-color:currentColor;
/* O desenho vai embutido aqui dentro, e nao como caminho para o arquivo.
Dois motivos, os dois ja custaram tempo:
1 · Ao abrir a pagina direto do disco, o navegador recusa carregar um SVG
de outro arquivo como mascara. O logo sumia e a tela ficava vazia.
2 · Embutido, o tokens.css funciona sozinho: quem importar este arquivo
nao precisa levar a pasta marca junto nem acertar caminho relativo.
Para trocar o desenho, rode de novo o gerador do data URI a partir de
marca/logo-fiorente.svg. A pasta marca continua sendo a fonte de verdade. */
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20id%3D%22Camada_2%22%20data-name%3D%22Camada%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201001.94%20154.72%22%3E%3Cg%20id%3D%22Camada_1-2%22%20data-name%3D%22Camada%201%22%3E%3Cg%3E%3Cpolygon%20points%3D%220%20153.12%2023.21%20153.12%2023.21%2093.84%2092.32%2093.84%2092.32%2073.66%2023.21%2073.66%2023.21%2022.97%20100.64%2022.97%20100.64%201.78%200%201.78%200%20153.12%22%2F%3E%3Crect%20x%3D%22123.53%22%20y%3D%221.78%22%20width%3D%2223.21%22%20height%3D%22151.34%22%2F%3E%3Cpolygon%20points%3D%22474.46%20153.12%20497.66%20153.12%20579.39%20153.12%20579.39%20132.69%20497.66%20132.69%20497.66%2086.28%20571.31%2086.28%20571.31%2066.1%20497.66%2066.1%20497.66%2022.21%20579.64%2022.21%20579.64%201.78%20474.46%201.78%20474.46%20153.12%22%2F%3E%3Cpolygon%20points%3D%22752.8%2022.97%20801.73%2022.97%20801.73%20153.12%20824.94%20153.12%20824.94%2022.97%20873.87%2022.97%20873.87%201.78%20752.8%201.78%20752.8%2022.97%22%2F%3E%3Cpolygon%20points%3D%221001.94%2022.21%201001.94%201.78%20896.76%201.78%20896.76%20153.12%20919.97%20153.12%201001.69%20153.12%201001.69%20132.69%20919.97%20132.69%20919.97%2086.28%20993.62%2086.28%20993.62%2066.1%20919.97%2066.1%20919.97%2022.21%201001.94%2022.21%22%2F%3E%3Cpath%20d%3D%22M451.6%2C46.17c0-28.25-16.65-44.39-53.98-44.39h-156.71v.02c-45.14.33-71.29%2C30.31-71.29%2C75.41s25.22%2C75.91%2C72.03%2C75.91%2C72.03-30.8%2C72.03-75.91c0-23.28-6.98-42.52-19.93-55.75h75.08s26.76%2C0%2C26.76%2C0c24.97%2C0%2C33.04%2C8.32%2C33.04%2C25.22%2C0%2C17.91-12.11%2C26.48-33.3%2C26.48h-58.77v79.96h23.21v-60.03h32.03l41.87%2C60.03h26.74v-2.78l-44.9-59.27c23.21-5.3%2C36.07-20.93%2C36.07-44.9ZM291.62%2C76.96c0%2C33.95-15.76%2C56.75-49.96%2C56.75s-49.96-22.8-49.96-56.75%2C15.78-55.19%2C49.22-55.52v.02h2.39c32.82.73%2C48.31%2C23.06%2C48.31%2C55.51Z%22%2F%3E%3Cpath%20d%3D%22M709.54%2C0v133.06h-6.1c-2.22-4.87-60.96-133.06-60.96-133.06h-40.99v154.72h22.18V21.66h6.1c1.79%2C3.92%2C60.96%2C133.06%2C60.96%2C133.06h40.99V0h-22.18Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
mask-image:url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20id%3D%22Camada_2%22%20data-name%3D%22Camada%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201001.94%20154.72%22%3E%3Cg%20id%3D%22Camada_1-2%22%20data-name%3D%22Camada%201%22%3E%3Cg%3E%3Cpolygon%20points%3D%220%20153.12%2023.21%20153.12%2023.21%2093.84%2092.32%2093.84%2092.32%2073.66%2023.21%2073.66%2023.21%2022.97%20100.64%2022.97%20100.64%201.78%200%201.78%200%20153.12%22%2F%3E%3Crect%20x%3D%22123.53%22%20y%3D%221.78%22%20width%3D%2223.21%22%20height%3D%22151.34%22%2F%3E%3Cpolygon%20points%3D%22474.46%20153.12%20497.66%20153.12%20579.39%20153.12%20579.39%20132.69%20497.66%20132.69%20497.66%2086.28%20571.31%2086.28%20571.31%2066.1%20497.66%2066.1%20497.66%2022.21%20579.64%2022.21%20579.64%201.78%20474.46%201.78%20474.46%20153.12%22%2F%3E%3Cpolygon%20points%3D%22752.8%2022.97%20801.73%2022.97%20801.73%20153.12%20824.94%20153.12%20824.94%2022.97%20873.87%2022.97%20873.87%201.78%20752.8%201.78%20752.8%2022.97%22%2F%3E%3Cpolygon%20points%3D%221001.94%2022.21%201001.94%201.78%20896.76%201.78%20896.76%20153.12%20919.97%20153.12%201001.69%20153.12%201001.69%20132.69%20919.97%20132.69%20919.97%2086.28%20993.62%2086.28%20993.62%2066.1%20919.97%2066.1%20919.97%2022.21%201001.94%2022.21%22%2F%3E%3Cpath%20d%3D%22M451.6%2C46.17c0-28.25-16.65-44.39-53.98-44.39h-156.71v.02c-45.14.33-71.29%2C30.31-71.29%2C75.41s25.22%2C75.91%2C72.03%2C75.91%2C72.03-30.8%2C72.03-75.91c0-23.28-6.98-42.52-19.93-55.75h75.08s26.76%2C0%2C26.76%2C0c24.97%2C0%2C33.04%2C8.32%2C33.04%2C25.22%2C0%2C17.91-12.11%2C26.48-33.3%2C26.48h-58.77v79.96h23.21v-60.03h32.03l41.87%2C60.03h26.74v-2.78l-44.9-59.27c23.21-5.3%2C36.07-20.93%2C36.07-44.9ZM291.62%2C76.96c0%2C33.95-15.76%2C56.75-49.96%2C56.75s-49.96-22.8-49.96-56.75%2C15.78-55.19%2C49.22-55.52v.02h2.39c32.82.73%2C48.31%2C23.06%2C48.31%2C55.51Z%22%2F%3E%3Cpath%20d%3D%22M709.54%2C0v133.06h-6.1c-2.22-4.87-60.96-133.06-60.96-133.06h-40.99v154.72h22.18V21.66h6.1c1.79%2C3.92%2C60.96%2C133.06%2C60.96%2C133.06h40.99V0h-22.18Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:left center;
mask-position:left center;
-webkit-mask-size:contain;
mask-size:contain;
mask-mode:alpha; /* usa so a transparencia do arquivo, ignora a cor interna dele */
}
/* ═══════════════════════════════════════════════════════════════
BARRA DO SISTEMA
A moldura que faz uma tela parecer sistema, e não documento solto.
É a mesma em todos os sistemas da casa, e é por isso que ela mora
aqui e não dentro de cada projeto.
Três lugares, sempre nesta ordem: a marca à esquerda, o nome do
módulo logo depois dela, e as ações à direita. Quando os sistemas
virarem um só, o seletor de módulo entra no lugar do nome, sem a
barra precisar mudar de forma.
NÃO vai na tela que o cliente vê. Ali a página é documento, e uma
barra de ferramenta em cima dela só atrapalha.
USO
═══════════════════════════════════════════════════════════════ */
.barra-sistema{
position:sticky;top:0;z-index:var(--nivel-fixo);
background:var(--fundo);
border-bottom:1px solid var(--linha);
}
/* A faixa atravessa a tela inteira, mas o que está dentro dela se alinha
com a coluna do conteúdo. Sem isto a marca fica encostada na borda
enquanto o texto da página começa bem mais para dentro, e a tela parece
montada por duas pessoas diferentes. */
.barra-sistema__interno{
display:flex;align-items:center;gap:1rem;
min-height:var(--barra-altura);
max-width:var(--largura);margin-inline:auto;
padding-inline:var(--margem);
}
.barra-sistema__marca{
display:inline-flex;align-items:center;
color:var(--texto);text-decoration:none;flex:none;
border-radius:var(--raio-minimo);
}
.barra-sistema__marca .logotipo{width:var(--barra-logo);display:block}
.barra-sistema__marca:focus-visible{outline:none;box-shadow:0 0 0 3px var(--destaque-lavado)}
@media (hover:hover){.barra-sistema__marca:hover{color:var(--destaque-tinta)}}
/* A divisa entre a marca e o nome do módulo. É uma barra inclinada, e não
um traço, porque ela separa duas coisas de peso diferente: a casa e a
sala dentro dela. */
.barra-sistema__modulo{
position:relative;flex:1 1 auto;min-width:0;
padding-left:1rem;
font-size:.875rem;font-weight:600;letter-spacing:.01em;
color:var(--texto-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.barra-sistema__modulo::before{
content:"";position:absolute;left:0;top:50%;
width:1px;height:1.1rem;margin-top:-.55rem;
background:var(--linha-forte);
transform:rotate(16deg);
}
.barra-sistema__acoes{display:flex;align-items:center;gap:.5rem;flex:none}
@media (max-width:34rem){
.barra-sistema__interno{min-height:var(--barra-altura-pequena);gap:.65rem}
.barra-sistema__marca .logotipo{width:5.75rem}
.barra-sistema__modulo{font-size:.8125rem;padding-left:.7rem}
}
/* No papel a barra não existe: ela é ferramenta de tela. */
@media print{ .barra-sistema{display:none !important} }
/* ═══════════════════════════════════════════════════════════════
INVERTER O PADRÃO · para documento de leitura
Por decisão, o escuro é o padrão do sistema: as ferramentas vivem nele.
Mas um documento longo, que a pessoa senta para ler ou manda imprimir,
se lê melhor no claro.
Carimbe data-padrao="claro" na raiz e a ordem se inverte: o claro passa
a ser o padrão, e o escuro só entra se o aparelho pedir escuro.
Os valores aqui não são novos. São os mesmos da camada 2, só trocados
de lugar. Se um deles mudar lá em cima, mude aqui também.
═══════════════════════════════════════════════════════════════ */
:root[data-padrao="claro"]:not([data-theme="dark"]){
color-scheme:light;
--fundo:var(--grafite-50);
--fundo-2:var(--grafite-100);
--card:var(--branco);
--linha:var(--grafite-200);
--linha-forte:var(--grafite-300);
--texto:var(--grafite-900);
--texto-2:var(--grafite-700);
--texto-3:var(--grafite-600);
--destaque:var(--lima-200);
--destaque-toque:var(--lima-300);
--sobre-destaque:var(--grafite-900);
--destaque-tinta:var(--mata);
--destaque-lavado:rgba(175,238,119,.22);
--grifo-fundo:var(--lima-200);
--grifo-texto:var(--grafite-900);
--atrasado:var(--coral-escuro);
--esperando:var(--ambar-escuro);
--concluido:var(--teal-escuro);
--informacao:var(--azul-escuro);
--estrategia:var(--roxo-escuro);
--serie-1:var(--grafico-1-escuro);
--serie-2:var(--grafico-2-escuro);
--serie-3:var(--grafico-3-escuro);
--serie-4:var(--grafico-4-escuro);
--serie-5:var(--grafico-5-escuro);
--cursor-sobre-escuro:var(--lima-100);
--cursor-sobre-claro:var(--grafite-950);
}
@media (prefers-color-scheme: dark){
:root[data-padrao="claro"]:not([data-theme="light"]){
color-scheme:dark;
--fundo:var(--grafite-950);
--fundo-2:#151813;
--card:var(--grafite-900);
--linha:rgba(255,255,255,.09);
--linha-forte:rgba(255,255,255,.16);
--texto:var(--grafite-100);
--texto-2:var(--grafite-400);
--texto-3:var(--grafite-450);
--destaque:var(--lima-100); /* bloco preenchido */
--destaque-toque:var(--lima-50); /* o mesmo, um degrau adiante */
--sobre-destaque:var(--grafite-950); /* o que se escreve em cima do bloco */
--destaque-tinta:var(--lima-100); /* letra e link */
--destaque-lavado:rgba(200,255,156,.12);
--grifo-fundo:var(--lima-100);
--grifo-texto:var(--grafite-950);
--atrasado:var(--coral-claro);
--esperando:var(--ambar-claro);
--concluido:var(--teal-claro);
--informacao:var(--azul-claro);
--estrategia:var(--roxo-claro);
--serie-1:var(--grafico-1-claro);
--serie-2:var(--grafico-2-claro);
--serie-3:var(--grafico-3-claro);
--serie-4:var(--grafico-4-claro);
--serie-5:var(--grafico-5-claro);
--cursor-sobre-escuro:var(--lima-100);
--cursor-sobre-claro:var(--grafite-950);
}
}
/* ═══════════════════════════════════════════════════════════════
TAILWIND v4
Descomente num projeto Tailwind para as classes utilitárias
nascerem destes tokens em vez de uma paleta paralela.
═══════════════════════════════════════════════════════════════
@theme inline{
--color-fundo:var(--fundo);
--color-card:var(--card);
--color-texto:var(--texto);
--color-texto-2:var(--texto-2);
--color-texto-3:var(--texto-3);
--color-destaque:var(--destaque);
--color-sobre-destaque:var(--sobre-destaque);
--color-linha:var(--linha);
--color-atrasado:var(--atrasado);
--color-esperando:var(--esperando);
--font-titulo:var(--fonte-titulo);
--font-corpo:var(--fonte-corpo);
--radius-card:var(--raio-card);
--radius-pilula:var(--raio-pilula);
}
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
IMPRESSÃO
O PDF é o produto da consultoria, então o papel não é detalhe.
Força o sotaque claro, apaga o que não existe no papel,
e impede tabela e figura de partirem no meio.
═══════════════════════════════════════════════════════════════ */
@media print{
:root{
color-scheme:light;
--fundo:var(--branco);
--fundo-2:var(--branco);
--card:var(--branco);
--linha:var(--grafite-300);
--linha-forte:var(--grafite-400);
--texto:#000000;
--texto-2:var(--grafite-700);
--texto-3:var(--grafite-700);
--destaque:var(--lima-200);
--sobre-destaque:#000000;
--destaque-tinta:var(--lima-700);
--grifo-fundo:var(--lima-200);
--grifo-texto:#000000;
}
.cursor, .botao, .barra-tema, nav, .menu, .aviso{ display:none !important; }
a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; color:var(--grafite-700); }
table, figure, .cartao, img, svg{ break-inside:avoid; }
thead{ display:table-header-group; }
h1,h2,h3{ break-after:avoid; }
@page{ margin:18mm 16mm; }
}
/* ═══════════════════════════════════════════════════════════════
PISO DE ACESSIBILIDADE
Vale em todo projeto que importar este arquivo.
═══════════════════════════════════════════════════════════════ */
:where(a,button,summary,[role="button"]):focus-visible{
outline:none;
box-shadow:0 0 0 4px var(--destaque-lavado);
border-color:var(--destaque);
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}