/* =====================================================================
   ADVFLOW.DOCS — tokens de cor, raio e fonte
   ---------------------------------------------------------------------
   1) As variáveis SEM prefixo têm os MESMOS NOMES do ADVFLOW
      (~/projetos/advflow/static/css/advflow.css), para reaproveitar
      componentes. Os VALORES de alguns foram escurecidos para passar no
      contraste WCAG AA (4,5:1 em texto) — cada ajuste está comentado.
   2) Tudo o que é próprio do DOCS tem prefixo --docs-.
   3) Tema claro em :root; tema escuro em [data-theme="escuro"]
      (mesmo atributo do ADVFLOW, na tag <html>).
   Contraste conferido par a par em 03/11/2026 (ver LEIAME.md).
   ===================================================================== */

:root {
  /* ---------- Nomes do ADVFLOW ---------- */
  --azul: #1b6fd8;          /* ADVFLOW #2f81f7 dá 3,7:1 com texto branco; este dá 4,9:1 */
  --azul-forte: #1559b3;    /* hover do primário; texto sobre --azul-suave (6,1:1) */
  --azul-suave: #e9f2ff;
  --ativo: #1b6fd8;         /* ADVFLOW #338dfa dá 3,4:1 sobre branco */
  --verde: #1a7f37;         /* ADVFLOW #1db954 dá 2,6:1 com branco; este dá 5,1:1 */
  --verde-suave: #e6f4ea;
  --vermelho: #cf222e;      /* ADVFLOW #ff4b4b dá 3,3:1; este dá 5,4:1 */
  --vermelho-suave: #ffecec;
  --amarelo: #8a5a00;       /* em texto; o âmbar do ADVFLOW (#f5b400) só serve de enfeite */
  --amarelo-suave: #fff5d6;
  --fundo: #ffffff; --cartao: #f6f8fa; --cartao-2: #eef1f4; --borda: #e8e8e8; --divisoria: #eeeeee;
  --texto: #24292e; --texto-2: #586069;
  --texto-3: #656d76;       /* ADVFLOW #7d8590 dá 3,7:1 sobre branco; este dá 5,3:1 */
  --lateral: #ffffff;
  --lateral-item: #636c76;  /* ADVFLOW #7d7d7d dá 4,1:1 */
  --lateral-hover: #24292e;
  --campo: #ffffff; --pilula: #eeeeee; --pilula-ativa: #ffffff;
  --raio: 6px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;

  /* ---------- Próprios do DOCS: marca ---------- */
  --docs-marca: #173a6b;          /* azul safira do timbrado — fundo do cabeçalho do signatário, ladrilho do símbolo */
  --docs-marca-forte: #0f2a52;
  --docs-marca-texto: #173a6b;    /* a marca usada como TEXTO sobre o fundo da página */
  --docs-sobre-marca: #ffffff;    /* texto sobre --docs-marca (11,3:1) */
  --docs-ouro: #c8a554;           /* dourado do escritório — SÓ enfeite/selo; sobre branco dá 2,3:1, nunca em texto */
  --docs-ouro-texto: #7a5c14;     /* dourado legível em texto (6,2:1 sobre branco) */
  --docs-ouro-suave: #faf6ea;
  --docs-link: #1b6fd8;
  --docs-foco: #1b6fd8;           /* anel de foco (3 px) */
  --docs-campo-borda: #8c959f;    /* contorno de campo de formulário, 3:1 (WCAG 1.4.11) */
  --docs-logo-a: #24292e;         /* «ADVFLOW» no letreiro */
  --docs-logo-b: #173a6b;         /* «DOCS» no letreiro */
  --docs-logo-tile-borda: transparent;
  --docs-pdf-mesa: #e4e8ee;       /* fundo atrás das folhas do PDF */
  --docs-pdf-papel: #ffffff;      /* a folha é sempre branca, nos dois temas */
  --docs-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .08);

  /* ---------- Situação da assinatura / do documento ----------
     texto = cor do selo e da bolinha; fundo = fundo do selo.
     Todo selo leva ÍCONE + PALAVRA: a cor nunca é a única pista. */
  --docs-pendente: #8a5a00;  --docs-pendente-fundo: #fff4d6;   /* relógio  · «Pendente» / doc «Em curso» */
  --docs-assinado: #116329;  --docs-assinado-fundo: #e6f4ea;   /* visto    · «Assinado» / doc «Finalizado» */
  --docs-recusado: #b42318;  --docs-recusado-fundo: #fde8e7;   /* X        · «Recusado» */
  --docs-expirado: #6f42c1;  --docs-expirado-fundo: #f1ebfb;   /* ampulheta· «Expirado» */
  --docs-cancelado: #57606a; --docs-cancelado-fundo: #eef1f4;  /* proibido · «Cancelado» */

  /* ---------- Campo de assinatura por signatário (sobre o PDF) ----------
     Paleta Okabe-Ito (feita para daltonismo). Ordem pensada para os 2
     primeiros signatários — o par azul × laranja é o mais seguro.
     -cor: preenchimento da etiqueta · -txt: texto da etiqueta (AA) ·
     -borda: contorno do campo sobre o papel branco (≥ 3:1) · -fundo: véu do campo.
     O campo mostra SEMPRE o número e o nome do signatário. */
  --docs-sig-1: #0072b2; --docs-sig-1-txt: #ffffff; --docs-sig-1-borda: #0072b2; --docs-sig-1-fundo: rgba(0, 114, 178, .12);   /* azul */
  --docs-sig-2: #e69f00; --docs-sig-2-txt: #111111; --docs-sig-2-borda: #b07800; --docs-sig-2-fundo: rgba(230, 159, 0, .16);   /* laranja */
  --docs-sig-3: #009e73; --docs-sig-3-txt: #111111; --docs-sig-3-borda: #00845f; --docs-sig-3-fundo: rgba(0, 158, 115, .14);   /* verde-azulado */
  --docs-sig-4: #d55e00; --docs-sig-4-txt: #111111; --docs-sig-4-borda: #d55e00; --docs-sig-4-fundo: rgba(213, 94, 0, .12);    /* vermelhão */
  --docs-sig-5: #56b4e9; --docs-sig-5-txt: #111111; --docs-sig-5-borda: #2a86c2; --docs-sig-5-fundo: rgba(86, 180, 233, .18);  /* céu */
  --docs-sig-6: #cc79a7; --docs-sig-6-txt: #111111; --docs-sig-6-borda: #b0548a; --docs-sig-6-fundo: rgba(204, 121, 167, .16); /* rosa-púrpura */

  /* ---------- Tela do signatário (celular) ---------- */
  --docs-cel-fonte: 18px;   /* corpo do texto para o cliente (leigo, muitas vezes idoso) */
  --docs-cel-titulo: 24px;
  --docs-cel-toque: 56px;   /* altura do botão principal; mínimo absoluto de alvo = 44 px */
  --docs-cel-raio: 12px;
}

[data-theme="escuro"] {
  /* ---------- Nomes do ADVFLOW (mesmos fundos do ADVFLOW escuro) ---------- */
  --azul: #2563c9;          /* fundo de botão: 5,7:1 com branco (o #2f81f7 dá 3,7:1) */
  --azul-forte: #1e56b0;
  --azul-suave: #1b2a3f;
  --ativo: #e6edf3;
  --verde: #1a7f37;
  --verde-suave: #16332a;
  --vermelho: #c62a32;      /* fundo de botão de perigo: 5,6:1 com branco */
  --vermelho-suave: #3a1d22;
  --amarelo: #f5c542;
  --amarelo-suave: #3a3118;
  --fundo: #161e29; --cartao: #202a36; --cartao-2: #28323d; --borda: #28323d; --divisoria: #1f2935;
  --texto: #e6edf3; --texto-2: #a9b1b7;
  --texto-3: #9aa2ab;       /* ADVFLOW #7d8590 fica no limite (4,5:1) e cai sobre o cartão */
  --lateral: #161e29; --lateral-item: #9aa2ab; --lateral-hover: #e6edf3;
  --campo: #161e29; --pilula: #28323d; --pilula-ativa: #2563c9;
  color-scheme: dark;

  /* ---------- DOCS ---------- */
  --docs-marca: #173a6b;
  --docs-marca-forte: #0f2a52;
  --docs-marca-texto: #a9c3ee;
  --docs-sobre-marca: #ffffff;
  --docs-ouro: #c8a554;
  --docs-ouro-texto: #d9bc74;
  --docs-ouro-suave: #2e2817;
  --docs-link: #5bb0ff;
  --docs-foco: #79b8ff;
  --docs-campo-borda: #6e7681;
  --docs-logo-a: #e6edf3;
  --docs-logo-b: #d9bc74;
  --docs-logo-tile-borda: #3c5f96;  /* o ladrilho azul-safira some no fundo escuro sem este filete */
  --docs-pdf-mesa: #0f151d;
  --docs-pdf-papel: #ffffff;
  --docs-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .35);

  --docs-pendente: #f5c542;  --docs-pendente-fundo: #3a3118;
  --docs-assinado: #56d364;  --docs-assinado-fundo: #16332a;
  --docs-recusado: #ff8a80;  --docs-recusado-fundo: #3a1d22;
  --docs-expirado: #c3a6ff;  --docs-expirado-fundo: #2c2240;
  --docs-cancelado: #a9b1b7; --docs-cancelado-fundo: #28323d;
  /* A paleta --docs-sig-* NÃO muda: o campo é desenhado sobre a folha branca do PDF. */
}