/* e-PGM · tokens (reforma, Fase 1).
 *
 * Única fonte de cor, raio, sombra, espaçamento, tamanho de fonte e movimento
 * da interface interna. Nenhum outro arquivo do sistema escreve cor: usam
 * var(--token). A base é docs/tokens.css (paleta Azul Toga e Ouro de Selo);
 * as extensões ao fim de cada bloco existem porque o sistema precisa delas
 * (texto sobre estado, véu de janela, fio de estado, vidro, papel do documento,
 * faixa de homologação).
 *
 * Cor só significa estado: --vencido, --atencao, --ok e --acao. O --ouro fica
 * para a autenticidade (ato emitido, número oficial, assinatura e hash
 * conferidos). Núcleos, setores e tipos de peça não têm cor.
 *
 * Ordem das camadas: tokens, base, componentes, telas, utilidades. A camada
 * "utilidades" fecha a lista para os estados que precisam valer sobre todo o
 * resto (oculto, apenas para leitor de tela, movimento reduzido, impressão). */

@layer tokens, base, componentes, telas, utilidades;

@layer tokens {
  :root {
    color-scheme: light;
    --fundo: #F5F5F7; --superficie: #FFFFFF; --superficie-2: #FAFAFB;
    --linha: rgba(0,0,0,.08); --linha-forte: rgba(0,0,0,.16);
    --texto: #1D1D1F; --texto-2: #48484D; --texto-3: #6E6E73;
    --marca: #1F3A5F;
    --acao: #1D5BBF; --acao-hover: #174C9F; --acao-suave: rgba(29,91,191,.10); --link: #1D5BBF;
    --ouro: #85662B; --ouro-suave: rgba(176,138,71,.14);
    --vencido: #B42318; --vencido-suave: rgba(180,35,24,.08);
    --atencao: #8F5507; --atencao-suave: rgba(214,140,20,.12);
    --ok: #1B7543; --ok-suave: rgba(27,117,67,.10);
    --aguardando: var(--texto-3);
    --anel-foco: 0 0 0 3px rgba(29,91,191,.35);
    --sombra-1: 0 1px 2px rgba(0,0,0,.05);
    --sombra-2: 0 8px 24px -8px rgba(0,0,0,.16);
    --sombra-3: 0 24px 64px -16px rgba(0,0,0,.28);
    --raio-1: 6px; --raio-2: 10px; --raio-3: 14px; --raio-pilula: 999px;
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
    --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 24px; --fs-7: 32px;
    --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --curva: cubic-bezier(.2,.8,.2,1); --t-1: 120ms; --t-2: 200ms; --t-3: 320ms;

    /* extensões do e-PGM */
    --superficie-3: #F2F2F4;            /* fundo rebaixado: colunas, trilhos */
    --neutro-suave: rgba(118,118,128,.10);
    --neutro-medio: rgba(118,118,128,.20);
    --texto-sobre-acao: #FFFFFF;        /* texto em botão de ação e na marca */
    --texto-sobre-estado: #FFFFFF;      /* texto em fundo cheio de estado */
    --inverso: #1D1D1F; --texto-inverso: #FFFFFF;
    --veu: rgba(17,18,20,.45);          /* fundo atrás de janela */
    --acao-linha: rgba(29,91,191,.30);
    --vencido-linha: rgba(180,35,24,.30);
    --atencao-linha: rgba(143,85,7,.30);
    --ok-linha: rgba(27,117,67,.30);
    --ouro-linha: rgba(133,102,43,.35);
    --vidro-fundo: rgba(250,250,252,.72);
    --vidro-desfoque: saturate(180%) blur(20px);
    --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --papel-fundo: #FFFFFF; --papel-texto: #111111;   /* papel do documento, igual ao PDF nos dois temas */
    --selo-fundo: #F8FAFC; --selo-borda: #C4CEDB;     /* selo da assinatura, igual ao do PDF nos dois temas */
    --selo-marca: #1F3A5F;                             /* faixa, emblema e pílula do selo, iguais ao PDF */
    --homologacao: #7A3100; --homologacao-realce: #FFB000;
    --entrada-fundo: linear-gradient(160deg, #0F2438 0%, #16324F 55%, #123A52 100%);
    --selecao: rgba(29,91,191,.22);
    --marca-fundo: #1F3A5F;             /* fundo cheio da marca (topo, barra) */
    --texto-sobre-marca: #FFFFFF;
    /* diálogos e menu flutuante (5.9.0) */
    --perigo: #B42318; --texto-sobre-perigo: #FFFFFF;   /* botão do diálogo destrutivo */
    --veu-dialogo: rgba(17,18,20,.40);
    --raio-dialogo: 16px; --raio-menu: 12px; --raio-item: 8px;
    --menu-fundo: #FFFFFF;
    /* tela de entrada (5.13.0): Azul Toga do painel e o dourado do selo sobre ele */
    --entrada-painel: #1F3A5F; --entrada-ouro: #D6B46C; --entrada-texto-suave: rgba(255,255,255,.80);
    --sombra-menu: 0 2px 6px rgba(0,0,0,.08), 0 16px 36px -10px rgba(0,0,0,.22);
  }

  /* Ícones usados pelo CSS (máscara: a cor vem do texto). */
  :root {
    --icone-adiante: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    --icone-abaixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icone-confere: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --icone-seguir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --icone-derivado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E");
  }

  html[data-tema="escuro"] {
    color-scheme: dark;
    --fundo: #111214; --superficie: #1A1B1E; --superficie-2: #232428;
    --linha: rgba(255,255,255,.09); --linha-forte: rgba(255,255,255,.18);
    --texto: #F2F2F4; --texto-2: #B4B4BB; --texto-3: #8E8E96;
    --marca: #A9C2E6;
    --acao: #2F6FD6; --acao-hover: #2A66C9; --acao-suave: rgba(127,174,245,.14); --link: #7FAEF5;
    --ouro: #D6B46C; --ouro-suave: rgba(214,180,108,.14);
    --vencido: #FF8A7A; --vencido-suave: rgba(255,138,122,.12);
    --atencao: #F0B54A; --atencao-suave: rgba(240,181,74,.12);
    --ok: #5FCB92; --ok-suave: rgba(95,203,146,.12);
    --anel-foco: 0 0 0 3px rgba(127,174,245,.45);
    --sombra-1: 0 1px 2px rgba(0,0,0,.40);
    --sombra-2: 0 8px 24px -8px rgba(0,0,0,.60);
    --sombra-3: 0 24px 64px -16px rgba(0,0,0,.70);

    --superficie-3: #161719;
    --neutro-suave: rgba(255,255,255,.07);
    --neutro-medio: rgba(255,255,255,.14);
    --texto-sobre-estado: #111214;
    --inverso: #F2F2F4; --texto-inverso: #111214;
    --veu: rgba(0,0,0,.60);
    --acao-linha: rgba(127,174,245,.35);
    --vencido-linha: rgba(255,138,122,.35);
    --atencao-linha: rgba(240,181,74,.35);
    --ok-linha: rgba(95,203,146,.35);
    --ouro-linha: rgba(214,180,108,.35);
    --vidro-fundo: rgba(26,27,30,.72);
    --selecao: rgba(127,174,245,.38);
    --marca-fundo: #1C2A3D;
    --perigo: #C7392C;
    --veu-dialogo: rgba(0,0,0,.55);
    --menu-fundo: #232428;
    --entrada-painel: #14263D;
    --sombra-menu: 0 2px 6px rgba(0,0,0,.40), 0 16px 36px -10px rgba(0,0,0,.70);
  }


  /* Papel do documento (folha timbrada, certidão, página do editor): sempre
   * claro, como o PDF, também no tema escuro. */
  [data-papel] {
    color-scheme: light;
    --fundo: #F5F5F7; --superficie: #FFFFFF; --superficie-2: #FAFAFB; --superficie-3: #F2F2F4;
    --linha: rgba(0,0,0,.08); --linha-forte: rgba(0,0,0,.16);
    --texto: #1D1D1F; --texto-2: #48484D; --texto-3: #6E6E73;
    --acao: #1D5BBF; --acao-suave: rgba(29,91,191,.10); --link: #1D5BBF;
    --vencido: #B42318; --atencao: #8F5507; --ok: #1B7543;
    --neutro-suave: rgba(118,118,128,.10); --neutro-medio: rgba(118,118,128,.20);
    --anel-foco: 0 0 0 3px rgba(29,91,191,.35);
  }

  /* Mais contraste quando o sistema operacional pede. */
  @media (prefers-contrast: more) {
    :root { --linha: rgba(0,0,0,.28); --linha-forte: rgba(0,0,0,.45); --texto-2: #3A3A3F; --texto-3: #55555A; }
    html[data-tema="escuro"] { --linha: rgba(255,255,255,.24); --linha-forte: rgba(255,255,255,.40); --texto-2: #CDCDD3; --texto-3: #A9A9B1; }
  }

  /* Movimento curto; com "reduzir movimento", tudo vira instantâneo. */
  @media (prefers-reduced-motion: reduce) {
    :root { --t-1: 0ms; --t-2: 0ms; --t-3: 0ms; }
  }

  /* Impressão sai sempre no claro. */
  @media print {
    :root, html[data-tema="escuro"] {
      color-scheme: light;
      --fundo: #FFFFFF; --superficie: #FFFFFF; --superficie-2: #FAFAFB; --superficie-3: #F2F2F4;
      --linha: rgba(0,0,0,.12); --linha-forte: rgba(0,0,0,.24);
      --texto: #1D1D1F; --texto-2: #48484D; --texto-3: #6E6E73;
      --marca: #1F3A5F; --acao: #1D5BBF; --link: #1D5BBF;
      --vencido: #B42318; --atencao: #8F5507; --ok: #1B7543; --ouro: #85662B;
      --sombra-1: none; --sombra-2: none; --sombra-3: none;
    }
  }
}