/* ==========================================================================
   TOKENS COMPARTILHADOS — FREDCALC + FREDZAP
   Fonte da verdade: fredcalc/site/design-tokens.css
   Cópia idêntica em: FREDZAP-2/site/design-tokens.css

   Os dois são um produto só com duas partes, e por isso têm a mesma cara
   (decisão do usuário, 07/09/2026). Nenhum manda no outro: cada um trouxe o
   que tinha de mais forte.

     FORMA vem do FredZap    canto vivo e a tipografia de gráfica
     COR   vem do FredCalc   a escala onde a cor diz o ESTADO

   Ao mexer aqui, mexa nos dois arquivos. Quando eles passarem a viver no
   mesmo domínio, isto vira um arquivo só, servido uma vez.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- FORMA (do FredZap) -------------------------------------------------
     "Papel cortado tem canto vivo, não bolha." O canto de 4px é o argumento
     visual mais próprio de uma gráfica, e por isso ele vence o arredondado. */
  --raio: 4px;
  --raio-g: 8px;
  --raio-sm: 4px;      /* nomes que o FredCalc já usa, apontando pra mesma forma */
  --raio-md: 6px;
  --raio-lg: 8px;
  --display: 'Archivo', system-ui, sans-serif;
  --corpo: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ---- ESCALA DE TEXTO E ESPAÇO ------------------------------------------
     Sem uma régua curta, cada tela escolhe o tamanho no olho: o styles.css chegou a
     50 tamanhos de fonte distintos e 144 valores de padding. Não é feio por si — é
     que duas telas iguais deixam de parecer iguais, e ninguém sabe qual é o certo
     na hora de escrever a próxima regra. Seis degraus de cada, e o certo é sempre
     um deles. Os valores saem do que a tela JÁ usa mais, pra migração não mexer na
     leitura: 13px é o texto do sistema, 11px o rótulo de coluna. */
  --txt-xs:  11px;   /* rótulo de coluna, selo, nota de rodapé */
  --txt-sm:  12px;   /* apoio, legenda, valor secundário */
  --txt-md:  13px;   /* o texto do sistema: linha de tabela, campo, botão */
  --txt-lg:  15px;   /* parágrafo de explicação */
  --txt-xl:  20px;   /* título de cartão */
  --txt-2xl: 28px;   /* título de tela */

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  /* ---- COR (do FredCalc) --------------------------------------------------
     Tintas de impressão, e cada família diz um ESTADO — dá pra ler uma fila de
     longe sem decorar cor de etapa:
       ocre     parado esperando alguém
       azul     a casa trabalhando (escurece conforme avança)
       verde    pronto ou entregue
       vermelho morreu                                                        */
  --tinta-verde:    #10603f;
  --tinta-ciano:    #0b7fa8;
  --tinta-magenta:  #b93a68;
  --tinta-amarelo:  #d9930f;
  --tinta-vermelho: #c04539;
  --tinta-preta:    #262e2a;
  --tinta-ardosia:  #4a5a63;

  /* A quinta tinta: entre o ocre e o vermelho. O prazo não tem dois estados, tem
     quatro — atenção, urgente, apertado, estourado — e sem esta faixa os dois do
     meio caíam no mesmo amarelo. Derivada, não escolhida no olho. */
  --tinta-laranja:  color-mix(in srgb, var(--tinta-amarelo), var(--tinta-vermelho) 50%);

  /* AS CORES DE SINAL (25/09/2026). As tintas acima são as da marca, feitas pra um
     monitor a 50cm — de propósito, discretas. Estas quatro existem pro caso oposto:
     a TV pendurada na parede do setor, lida a três metros, com a luz do galpão por
     cima. São as MESMAS quatro faixas de prazo (tranquilo, atenção, urgente,
     estourado), só que saturadas o bastante pra atravessar a distância. Não substituem
     as tintas: quem está perto da tela continua vendo a paleta da casa. */
  --sinal-verde:    #21c95e;
  --sinal-amarelo:  #ffd21e;
  --sinal-laranja:  #ff8a1f;
  --sinal-vermelho: #ff3b30;

  /* Os dois que NÃO viram com o tema: branco continua branco quando está por cima de
     uma tinta cheia (ou atrás de uma foto/logo), e o amarelo continua pedindo texto
     escuro — branco sobre #d9930f dá 2,4:1, longe dos 4,5:1 de um rótulo pequeno.
     Na gráfica é a mesma coisa: amarelo se lê com preto. */
  --branco:         #ffffff;
  --sobre-amarelo:  #2a1f05;

  /* Os nomes curtos que o FredZap já usa 90 vezes — mesmos valores, pra não
     reescrever componente nenhum. */
  --ciano:   var(--tinta-ciano);
  --magenta: var(--tinta-magenta);
  --amarelo: var(--tinta-amarelo);
  --verde:   var(--tinta-verde);
  --erro:    var(--tinta-vermelho);
  --ciano-suave:   color-mix(in srgb, var(--tinta-ciano), transparent 88%);
  --amarelo-suave: color-mix(in srgb, var(--tinta-amarelo), transparent 88%);
  --verde-suave:   color-mix(in srgb, var(--tinta-verde), transparent 90%);

  /* ---- SUPERFÍCIES ----------------------------------------------------
     Papel quente do FredZap: fundo de gráfica não é cinza de escritório. */
  --papel:   #f3f2ee;
  --alto:    #ffffff;
  --linha:   #dddbd3;
  --tinta:   #17171a;
  --tinta-2: #5f6169;
  --sombra-1: 0 1px 2px rgba(23, 23, 26, .06), 0 2px 8px rgba(23, 23, 26, .05);
  --sombra-2: 0 2px 4px rgba(23, 23, 26, .07), 0 12px 28px rgba(23, 23, 26, .09);
  --sombra: var(--sombra-1);
}

/* O escuro: os dois apelidam o body de um jeito, então valem os dois nomes. */
body.dark,
body[data-tema="escuro"] {
  --tinta-verde:    #2e8b62;
  --tinta-ciano:    #2799c2;
  --tinta-magenta:  #cf5c85;
  --tinta-amarelo:  #e2a832;
  --tinta-vermelho: #d0604f;
  --tinta-preta:    #3c453f;
  --tinta-ardosia:  #5d6d76;
  --papel:   #121215;
  --alto:    #1a1a1e;
  --linha:   #2c2c32;
  --tinta:   #e8e7e2;
  --tinta-2: #979aa2;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .22);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .32);
}