/* ═══════════════════════════════════════════════════════════════════════
   CRM CONFIANÇA — TOKENS (paleta da marca + camada semântica)
   Fonte: _estudo/7-pesquisa-e-visual.md §B.14 (site-confianca: entrar,
   meus-pedidos, avaliar, index e micro.css). Carregar ANTES de tudo.

   Regras (contrato §16.1):
   - Branco/papel com laranja #E2620E como ÚNICA cor saturada; ouro só na
     marca e no estado "concluído".
   - Títulos em Fraunces, todo texto que se lê em Archivo (piso 14px).
   - Nada de rótulo em mono maiúsculo espaçado. IBM Plex Mono não entra:
     número alinhado = Archivo com tabular-nums (classe .num).
   - Componentes usam SÓ a camada semântica (--fundo, --texto, --acento…),
     nunca a paleta crua — é isso que permite o tema escuro.
   - Fontes auto-hospedadas (assets/fontes/), sem Google Fonts. As URLs são
     relativas ao ativo.php que serve este CSS (…/ativo.php?f=assets/tokens.css),
     com o arquivo direto como segunda opção.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 600; font-stretch:100%;
  font-display:swap;
  src:url("ativo.php?f=assets%2Ffontes%2FArchivo-normal-400_600.woff2&v=1") format("woff2"),
      url("fontes/Archivo-normal-400_600.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 700;
  font-display:swap;
  src:url("ativo.php?f=assets%2Ffontes%2FFraunces-normal-300_700.woff2&v=1") format("woff2"),
      url("fontes/Fraunces-normal-300_700.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 700;
  font-display:swap;
  src:url("ativo.php?f=assets%2Ffontes%2FFraunces-italic-300_700.woff2&v=1") format("woff2"),
      url("fontes/Fraunces-italic-300_700.woff2") format("woff2");
}

:root{
  /* ── paleta da marca (fixa: não muda com o tema) ── */
  --papel:#FCFCFA; --superficie:#F6F5F1; --tinta:#17150F;
  --grafite:#5F5C52; --fraco:#737061;
  --linha:#E4E1D7; --linha-forte:#CFCABA;
  --laranja:#E2620E; --laranja-lavado:#FDF3EB;
  --ouro:#8A6D2C; --ouro-marca:#A8842A; --ouro-lavado:#FCFAF4; --ouro-claro:#C9A227;
  --creme-hover:#FFF7EA;

  /* ── camada semântica (é ESTA que os componentes usam) ── */
  --fundo:var(--papel);            /* página */
  --fundo-2:var(--superficie);     /* células, caixas recuadas, faixas, barra lateral */
  --cartao:var(--papel);           /* folha sobre a página */
  --realce:var(--creme-hover);     /* linha sob o cursor, item escolhido em lista */
  --texto:var(--tinta);
  --texto-2:var(--grafite);
  --texto-3:var(--fraco);          /* letra miúda; 4,85:1 */
  --placeholder:#B4B0A4;
  --borda:var(--linha);
  --borda-forte:var(--linha-forte);/* 1,5:1 — nunca carrega informação sozinha */
  --acento:var(--laranja);         /* única cor saturada */
  --acento-texto:#BF4F08;          /* o mesmo laranja, escurecido p/ texto de 14–16px (4,7:1 sobre papel; o #E2620E dá 3,4:1) */
  --acento-lavado:var(--laranja-lavado);
  --sobre-acento:var(--papel);     /* texto sobre laranja: papel, nunca #fff */
  --preenche-cta:var(--tinta);     /* a "tinta que sobe" no hover do botão principal */
  --marca-fio:var(--ouro-marca);   /* traço do prumo */
  --marca-ponto:var(--laranja);
  --marca-nome:var(--tinta);       /* wordmark */
  --ouro-texto:var(--ouro);        /* concluído, pago */
  --erro-fundo:rgba(226,98,14,.09);
  --anel-foco:0 0 0 3px rgba(226,98,14,.16);
  --anel-campo:0 0 0 3px rgba(226,98,14,.13);
  --selecao-fundo:var(--laranja); --selecao-texto:var(--papel);
  --veu:rgba(23,21,15,.36);        /* fundo atrás do modal */

  /* status (do laudo, do pedido) — lista fechada, nunca vinda do servidor */
  --st-aguardando:var(--grafite);
  --st-andamento:var(--laranja);
  --st-concluido:var(--ouro);
  --st-cancelado:var(--fraco);

  /* ── tipografia ── */
  --serif:"Fraunces", Georgia, serif;
  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* só código (token, link) */
  --serif-titulo:"SOFT" 22, "WONK" 1;  /* h1, h2 */
  --serif-h3:"SOFT" 14, "WONK" 0;
  --serif-numero:"SOFT" 22, "WONK" 0;  /* valor apurado, número do laudo */
  --fs-nota:13px;                      /* só nota de rodapé e dica */
  --fs-piso:14px;                      /* piso de tudo o que se lê */
  --fs-corpo:16px; --lh-corpo:1.6;
  --fs-app:15px;                       /* corpo das telas densas da equipe */
  --fs-rotulo:clamp(15px,1.2vw,17px);  /* .rotulo: Archivo 600 laranja, sem caixa alta */
  --fs-h1-app:clamp(28px,3.2vw,38px);
  --fs-h2-app:clamp(21px,2.2vw,25px);
  --fs-titulo:clamp(32px,3.6vw,54px);
  --fs-titulo-2:clamp(28px,2.8vw,40px);

  /* ── raios ── */
  --raio-doc:1px;      /* cartão-documento */
  --raio:2px;          /* padrão: botão, chip, selo, célula, moldura */
  --raio-campo:4px;    /* campo de formulário */
  --raio-cartao:6px;   /* cartão do login, modal */

  /* ── sombras (elevação de papel: hairline de contato + sombra longa e baixa) ── */
  --sombra-repouso:0 1px 0 var(--borda-forte), 0 30px 56px -42px rgba(23,21,15,.26);
  --sombra-eleva:0 1px 0 var(--borda-forte), 0 24px 44px -28px rgba(23,21,15,.25);
  --sombra-cartao:0 1px 2px rgba(23,21,15,.04), 0 24px 48px -32px rgba(23,21,15,.22);
  --sombra-cta:0 14px 30px -18px rgba(23,21,15,.42);
  --sombra-menu:0 18px 40px -28px rgba(23,21,15,.25), 0 0 0 1px var(--borda);
  --sombra-balao:0 14px 30px -14px rgba(14,13,20,.6);
  --banda-header:rgba(252,252,250,.92);

  /* ── espaço e layout ── */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px;
  --e-7:28px; --e-8:32px; --e-9:40px; --e-10:48px; --e-11:64px;
  --coluna:820px; --coluna-larga:1240px; --gutter:32px;
  --lateral:216px;                       /* barra lateral da equipe */
  --topo:64px;                           /* barra de cima da equipe */
  --alvo:44px;                           /* alvo de toque mínimo */

  /* ── movimento ── */
  --tique:150ms; --gesto:350ms; --cena:800ms; --panorama:1200ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-carimbo:cubic-bezier(.34,1.56,.64,1);

  /* ── textura de papel (body::before) ── */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-opacidade:.032; --grao-mistura:multiply;

  color-scheme:light;
}

/* ── tema escuro: PROPOSTA (B.4/B.14), não aprovada pelo dono ──
   O claro é o padrão: as páginas nascem com <html data-tema="claro">. O
   escuro só vale quando a pessoa escolhe (data-tema="escuro") ou quando
   escolhe "automático" (o atributo sai e o sistema decide). */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fundo:#17150F; --fundo-2:#201E18; --cartao:#1E1C16; --realce:#2A2620;
    --texto:#EAEAE7; --texto-2:#BCBBB8; --texto-3:#9C9B97; --placeholder:#6E6C66;
    --borda:#2E2C27; --borda-forte:#403F39;
    --acento:#E2620E; --acento-texto:#EE7A2E; --acento-lavado:#2F1E0F;
    --sobre-acento:#FCFCFA; --preenche-cta:#2B2924;
    --marca-fio:#C9A227; --marca-ponto:#E2620E; --marca-nome:#FCFCFA;
    --ouro-texto:#C9A227;
    --erro-fundo:rgba(226,98,14,.14); --veu:rgba(0,0,0,.55);
    --st-aguardando:#BCBBB8; --st-concluido:#C9A227; --st-cancelado:#9C9B97;
    --sombra-repouso:0 1px 0 var(--borda-forte), 0 30px 56px -42px rgba(0,0,0,.6);
    --sombra-eleva:0 1px 0 var(--borda-forte), 0 24px 44px -28px rgba(0,0,0,.6);
    --sombra-cartao:0 1px 2px rgba(0,0,0,.3), 0 24px 48px -32px rgba(0,0,0,.7);
    --sombra-cta:0 14px 30px -18px rgba(0,0,0,.7);
    --sombra-menu:0 18px 40px -28px rgba(0,0,0,.7), 0 0 0 1px var(--borda-forte);
    --banda-header:rgba(23,21,15,.9);
    --grao-opacidade:.025; --grao-mistura:screen;
    color-scheme:dark;
  }
}
:root[data-tema="escuro"]{
  --fundo:#17150F; --fundo-2:#201E18; --cartao:#1E1C16; --realce:#2A2620;
  --texto:#EAEAE7; --texto-2:#BCBBB8; --texto-3:#9C9B97; --placeholder:#6E6C66;
  --borda:#2E2C27; --borda-forte:#403F39;
  --acento:#E2620E; --acento-texto:#EE7A2E; --acento-lavado:#2F1E0F;
  --sobre-acento:#FCFCFA; --preenche-cta:#2B2924;
  --marca-fio:#C9A227; --marca-ponto:#E2620E; --marca-nome:#FCFCFA;
  --ouro-texto:#C9A227;
  --erro-fundo:rgba(226,98,14,.14); --veu:rgba(0,0,0,.55);
  --st-aguardando:#BCBBB8; --st-concluido:#C9A227; --st-cancelado:#9C9B97;
  --sombra-repouso:0 1px 0 var(--borda-forte), 0 30px 56px -42px rgba(0,0,0,.6);
  --sombra-eleva:0 1px 0 var(--borda-forte), 0 24px 44px -28px rgba(0,0,0,.6);
  --sombra-cartao:0 1px 2px rgba(0,0,0,.3), 0 24px 48px -32px rgba(0,0,0,.7);
  --sombra-cta:0 14px 30px -18px rgba(0,0,0,.7);
  --sombra-menu:0 18px 40px -28px rgba(0,0,0,.7), 0 0 0 1px var(--borda-forte);
  --banda-header:rgba(23,21,15,.9);
  --grao-opacidade:.025; --grao-mistura:screen;
  color-scheme:dark;
}

/* ── cores das etapas (14/10/2026, pedido do dono: cada etapa com a sua cor) ──
   Uma por etapa, na ordem do fluxo: cinza (novo) → âmbar (documentos) → azul
   (aguardando vistoria) → verde-água (vistoria feita) → violeta (pesquisa) →
   magenta (cálculo) → laranja da marca (revisão do chefe) → ouro (assinatura) →
   verde (concluído). Contraste ≥ 4,5:1 sobre o papel e sobre o fundo escuro. */
:root{
  --etapa-novo:#5F5C52;
  --etapa-documentos:#8A5A00;
  --etapa-aguardando_vistoria:#1D5FB0;
  --etapa-vistoria_feita:#0B7A6F;
  --etapa-pesquisa:#5B4BB7;
  --etapa-calculo:#9B2F8F;
  --etapa-revisao:#BF4F08;
  --etapa-finalizacao:#8A6D2C;
  --etapa-concluido:#2E7D32;
  --etapa-pausado:#737061;
  --etapa-cancelado:#A8322A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --etapa-novo:#BCBBB8;
    --etapa-documentos:#E0A84A;
    --etapa-aguardando_vistoria:#6FA8F0;
    --etapa-vistoria_feita:#4CC3B4;
    --etapa-pesquisa:#A79CF2;
    --etapa-calculo:#E08AD6;
    --etapa-revisao:#EE7A2E;
    --etapa-finalizacao:#C9A227;
    --etapa-concluido:#6CC070;
    --etapa-pausado:#9C9B97;
    --etapa-cancelado:#F0857A;
  }
}
:root[data-tema="escuro"]{
  --etapa-novo:#BCBBB8;
  --etapa-documentos:#E0A84A;
  --etapa-aguardando_vistoria:#6FA8F0;
  --etapa-vistoria_feita:#4CC3B4;
  --etapa-pesquisa:#A79CF2;
  --etapa-calculo:#E08AD6;
  --etapa-revisao:#EE7A2E;
  --etapa-finalizacao:#C9A227;
  --etapa-concluido:#6CC070;
  --etapa-pausado:#9C9B97;
  --etapa-cancelado:#F0857A;
}