/* =====================================================================
   TOKENS — fonte única de valores visuais do sistema.
   ---------------------------------------------------------------------
   Regras (verificadas por tests/test_design_tokens.py):
   1. Cor, sombra, raio, espaçamento e tipografia só existem aqui.
      Os demais CSS usam var(--…). Hex/rgb soltos fora deste arquivo
      reprovam o teste.
   2. Componentes usam tokens SEMÂNTICOS (--cor-texto, --cor-borda…),
      nunca a paleta crua (--grafite-900…), exceto o próprio shell.
   3. Contraste mínimo verificado: texto 4.5:1, componentes 3:1
      (docs/design-system/colors.md traz a tabela medida).

   Direção de arte "papel timbrado digital" (docs/design-system/visual-language.md):
   grafite = autoridade, dourado = assinatura (linha e selo, nunca tinta),
   neutros quentes = papel. Profundidade por camadas de sombra suave, não
   por bordas pesadas. Movimento curto, com propósito.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Paleta institucional ---------- */
  /* Grafite: cabeçalho, ações primárias, texto forte. */
  --grafite-950: #1b1c1f;
  --grafite-900: #26272b;
  --grafite-800: #313237;
  --grafite-700: #404148;
  --grafite-600: #57585f;

  /* Dourado: assinatura da marca. Preenchimentos e realces; como TEXTO
     sobre branco só a partir do 700 (contraste ≥ 4.5:1). */
  --dourado-50: #fbf7ec;
  --dourado-100: #f5ecd3;
  --dourado-200: #ead9a8;
  --dourado-300: #dcc27a;
  --dourado-400: #cdac5a;
  --dourado-500: #bf9a45;
  --dourado-600: #a17f31;
  --dourado-700: #7c6125;
  --dourado-800: #5b471b;

  /* Neutros levemente quentes (harmonizam com o dourado). */
  --neutro-0: #ffffff;
  --neutro-25: #fbfaf8;
  --neutro-50: #f6f5f2;
  --neutro-100: #eeece7;
  --neutro-200: #e1ded7;
  --neutro-300: #cbc7be;
  --neutro-400: #8f8a81;
  --neutro-500: #6f6b64;
  --neutro-600: #5f5b54;
  --neutro-700: #46433e;
  --neutro-800: #2f2d2a;
  --neutro-900: #1f1e1b;

  /* Semânticas (texto escuro + fundo claro + borda média). */
  --verde-700: #17603d;
  --verde-600: #1f7a4d;
  --verde-100: #dcefe3;
  --verde-50: #eef7f1;
  --ambar-700: #7a4f00;
  --ambar-500: #c98a00;
  --ambar-100: #fbecc6;
  --ambar-50: #fdf6e3;
  --vermelho-700: #a3241a;
  --vermelho-600: #b42318;
  --vermelho-100: #f9dcd8;
  --vermelho-50: #fdeeec;
  --azul-700: #1b5592;
  --azul-600: #2364aa;
  --azul-100: #dbe7f6;
  --azul-50: #eef4fb;
  --violeta-700: #5a3d8a;
  --violeta-50: #f3eff9;

  /* Translúcidos (únicos valores com alfa do sistema; usados em sombras,
     véus, brilhos e anéis). */
  --tinta-04: rgb(31 30 27 / 0.04);
  --tinta-06: rgb(31 30 27 / 0.06);
  --tinta-08: rgb(31 30 27 / 0.08);
  --tinta-12: rgb(31 30 27 / 0.12);
  --tinta-18: rgb(31 30 27 / 0.18);
  --tinta-28: rgb(31 30 27 / 0.28);
  --luz-10: rgb(255 255 255 / 0.1);
  --luz-16: rgb(255 255 255 / 0.16);
  --luz-28: rgb(255 255 255 / 0.28);
  --brilho-dourado-08: rgb(191 154 69 / 0.08);
  --brilho-dourado-16: rgb(191 154 69 / 0.16);
  --brilho-dourado-28: rgb(191 154 69 / 0.28);
  --brilho-dourado-45: rgb(191 154 69 / 0.45);
  --anel-foco-suave: rgb(191 154 69 / 0.32);   /* halo dourado do campo em foco */
  --anel-perigo-suave: rgb(180 35 24 / 0.18);

  /* ---------- Tokens semânticos ---------- */
  --cor-fundo: var(--neutro-50);
  --cor-superficie: var(--neutro-0);
  --cor-superficie-sutil: var(--neutro-25);
  --cor-superficie-realce: var(--neutro-100);
  --cor-superficie-elevada: var(--neutro-0);
  --cor-borda: var(--neutro-200);
  --cor-borda-sutil: var(--neutro-100);
  --cor-borda-forte: var(--neutro-300);
  --cor-borda-campo: var(--neutro-400);   /* 3,4:1 — limite do campo visível (1.4.11) */
  --cor-texto: var(--neutro-900);
  --cor-texto-secundario: var(--neutro-600);
  --cor-texto-terciario: var(--neutro-500);
  --cor-texto-inverso: var(--neutro-0);
  --cor-texto-inverso-sutil: var(--neutro-300);
  --cor-link: var(--azul-700);

  --cor-marca: var(--dourado-600);
  --cor-marca-forte: var(--dourado-600);
  --cor-marca-viva: var(--dourado-500);
  --cor-marca-texto: var(--dourado-700);
  --cor-marca-fundo: var(--dourado-50);
  --cor-marca-fundo-forte: var(--dourado-100);
  --cor-marca-borda: var(--dourado-200);
  /* Hover dos cartões clicáveis (borda e título): dourado da marca. */
  --hover-cartao-borda: var(--cor-marca-borda);
  --hover-cartao-texto: var(--cor-marca-texto);

  --cor-primaria: var(--grafite-900);
  --cor-primaria-hover: var(--grafite-800);
  --cor-primaria-ativa: var(--grafite-950);
  --cor-primaria-texto: var(--neutro-0);

  /* Foco: assinatura própria, nunca o anel azul do navegador. Anel grafite com um halo
     claro que o separa de qualquer fundo; sobre superfícies escuras (cabeçalho) o anel
     vira dourado-300 e o halo, grafite. Tudo via :focus-visible (teclado), WCAG 2.4.7/2.4.11. */
  --foco-cor: var(--grafite-900);
  --foco-contraste: var(--neutro-0);
  --foco-cor-inverso: var(--dourado-300);
  --foco-contraste-inverso: var(--grafite-950);
  --foco-espessura: 2px;
  --foco-offset: 2px;
  --cor-foco: var(--foco-cor);
  --anel-foco: 0 0 0 var(--foco-offset) var(--foco-contraste),
    0 0 0 calc(var(--foco-offset) + var(--foco-espessura)) var(--foco-cor);
  /* O mesmo anel por dentro, para quem mora num contêiner que corta o que vaza (abas que
     rolam de lado): grafite na borda, halo claro do lado de dentro. */
  --anel-foco-interno: inset 0 0 0 var(--foco-espessura) var(--foco-cor),
    inset 0 0 0 calc(var(--foco-espessura) + var(--foco-offset)) var(--foco-contraste);

  --cor-sucesso: var(--verde-700);
  --cor-sucesso-solida: var(--verde-600);
  --cor-sucesso-fundo: var(--verde-50);
  --cor-sucesso-borda: var(--verde-100);
  --cor-aviso: var(--ambar-700);
  --cor-aviso-solida: var(--ambar-500);
  --cor-aviso-fundo: var(--ambar-50);
  --cor-aviso-borda: var(--ambar-100);

  /* Cores de fonte do DOCUMENTO (o que sai impresso), oferecidas pelo editor. Iguais à
     paleta fechada que o saneador aceita (documentos/regioes.py · CORES_DE_FONTE). */
  --doc-cor-preto: #000000;
  --doc-cor-cinza: #555555;
  --doc-cor-vermelho: #a3241a;
  --doc-cor-azul: #1b5592;
  --doc-cor-verde: #17603d;
  --cor-perigo: var(--vermelho-700);
  --cor-perigo-solida: var(--vermelho-600);
  --cor-perigo-fundo: var(--vermelho-50);
  --cor-perigo-borda: var(--vermelho-100);
  --cor-info: var(--azul-700);
  --cor-info-fundo: var(--azul-50);
  --cor-info-borda: var(--azul-100);

  /* Cabeçalho institucional */
  --shell-cabecalho-fundo: var(--grafite-900);
  --shell-cabecalho-fundo-escuro: var(--grafite-950);
  --shell-cabecalho-texto: var(--neutro-0);
  --shell-filete: var(--dourado-500);
  --shell-filete-claro: var(--dourado-300);
  --shell-navegacao-fundo: var(--neutro-0);

  /* Fundo da página: papel com um brilho dourado discreto no topo. */
  --fundo-pagina: radial-gradient(60rem 22rem at 50% -8rem, var(--brilho-dourado-08), transparent 70%),
    var(--cor-fundo);

  /* Sobreposições */
  --cor-veu: rgb(27 28 31 / 0.42);
  --desfoque-veu: 3px;

  /* ---------- Tipografia ---------- */
  --fonte-base: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --texto-2xs: 0.6875rem;  /* 11px — micro-rótulos em caixa alta */
  --texto-xs: 0.75rem;     /* 12px */
  --texto-sm: 0.8125rem;   /* 13px */
  --texto-md: 0.875rem;    /* 14px — corpo padrão (alta densidade) */
  --texto-lg: 1rem;        /* 16px */
  --texto-xl: 1.125rem;    /* 18px */
  --texto-2xl: 1.375rem;   /* 22px */
  --texto-3xl: 1.75rem;    /* 28px — título de página */
  --texto-display: 2rem;   /* 32px — título de página em telas largas */
  --texto-4xl: 2.25rem;    /* 36px — números de destaque */
  --texto-5xl: 2.75rem;    /* 44px — número do ofício no login/detalhe */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --altura-linha-justa: 1.25;
  --altura-linha: 1.5;
  --rastreio-rotulo: 0.06em;
  --rastreio-titulo: -0.02em;
  --rastreio-display: -0.025em;

  /* ---------- Espaçamento (grade de 4px) ---------- */
  --esp-0: 0;
  --esp-px: 1px;
  --esp-05: 0.125rem; /* 2 */
  --esp-1: 0.25rem;   /* 4 */
  --esp-2: 0.5rem;    /* 8 */
  --esp-3: 0.75rem;   /* 12 */
  --esp-4: 1rem;      /* 16 */
  --esp-5: 1.25rem;   /* 20 */
  --esp-6: 1.5rem;    /* 24 */
  --esp-8: 2rem;      /* 32 */
  --esp-10: 2.5rem;   /* 40 */
  --esp-12: 3rem;     /* 48 */
  --esp-16: 4rem;     /* 64 */
  --esp-20: 5rem;     /* 80 */

  /* ---------- Dimensões ---------- */
  --altura-controle: 2.5rem;        /* 40px: inputs/botões padrão (alvo ≥ 24px) */
  --altura-controle-sm: 2rem;       /* 32px */
  --altura-controle-lg: 2.75rem;    /* 44px: mobile/toque */
  /* Alvo mínimo de toque (WCAG 2.5.8). Em px de propósito: a escala de 90% (html 90%)
     encolhe tudo que é rem, e o mínimo de acessibilidade não pode encolher junto. */
  --alvo-minimo: 24px;
  --altura-cabecalho: 4rem;         /* 64px */
  --altura-navegacao: 3.25rem;      /* 52px: menu superior */
  --altura-topo: calc(var(--altura-cabecalho) + var(--altura-navegacao));
  /* Com o rem a 90% (ver base.css), estes valores mantêm a mesma largura em pixels de
     antes: o sistema fica menor, a página não fica mais estreita. */
  --largura-conteudo: 88.89rem;     /* 1280px */
  --largura-formulario: 62.22rem;   /* 896px */
  --largura-leitura: 42rem;
  --tamanho-icone: 1.125rem;
  --tamanho-icone-sm: 1rem;
  --filete: 3px;                    /* a linha dourada da assinatura */
  --filete-fino: 2px;

  /* ---------- Bordas, raios, sombras ---------- */
  --borda: 1px solid var(--cor-borda);
  --borda-sutil: 1px solid var(--cor-borda-sutil);
  --borda-forte: 1px solid var(--cor-borda-forte);
  --raio-xs: 4px;
  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 12px;
  --raio-xl: 16px;
  --raio-pilula: 999px;

  /* Elevação: anel de 1px (define a borda) + sombra difusa. Nível sobe com a
     importância temporal do elemento (cartão < menu < diálogo). */
  --sombra-1: 0 1px 2px var(--tinta-06);
  --sombra-2: 0 1px 3px var(--tinta-08), 0 4px 12px var(--tinta-06);
  --sombra-3: 0 8px 24px var(--tinta-12), 0 2px 6px var(--tinta-08);
  --sombra-4: 0 24px 48px -12px var(--tinta-28), 0 8px 16px -8px var(--tinta-12);
  --sombra-cartao: 0 0 0 1px var(--tinta-06), 0 1px 2px var(--tinta-04), 0 10px 28px -16px var(--tinta-18);
  --sombra-cartao-hover: 0 0 0 1px var(--tinta-08), 0 2px 4px var(--tinta-06), 0 16px 32px -14px var(--tinta-28);
  --sombra-flutuante: 0 0 0 1px var(--tinta-08), 0 12px 32px -8px var(--tinta-28), 0 2px 6px var(--tinta-08);
  --sombra-foco-campo: 0 0 0 3px var(--anel-foco-suave);
  --sombra-erro-campo: 0 0 0 3px var(--anel-perigo-suave);
  --sombra-interna-topo: inset 0 1px 0 var(--luz-16);
  --sombra-marca: 0 1px 2px var(--tinta-08), 0 6px 16px -6px var(--brilho-dourado-45);

  /* ---------- Movimento (docs/design-system/motion.md) ---------- */
  --duracao-instantanea: 90ms;  /* pressionar, foco */
  --duracao-rapida: 140ms;      /* hover, troca de cor, menus */
  --duracao-media: 220ms;       /* entrada de diálogo, toast, abas, gaveta */
  --duracao-lenta: 360ms;       /* página, troca de lista, linha do tempo */
  --duracao-enfase: 640ms;      /* carimbo (emissão), confirmações */
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);         /* entrada: desacelera */
  --curva-saida: cubic-bezier(0.4, 0, 1, 1);          /* saída: acelera */
  --curva-suave: cubic-bezier(0.65, 0, 0.35, 1);      /* troca de estado simétrica */
  --curva-expressiva: cubic-bezier(0.34, 1.35, 0.64, 1); /* ênfase: leve ultrapassagem */
  --escala-pressao: 0.985;

  /* ---------- Camadas ----------
     Painéis que brotam de um campo (calendário, listas) ficam ACIMA do conteúdo e da
     barra de ações flutuante (uma lista aberta perto do rodapé não pode sumir atrás dela)
     e ABAIXO do cabeçalho. */
  /* Dentro de uma lista: as ações da linha sobem um degrau (o link esticado da linha não
     pode cobri-las) e o cabeçalho de mês preso ao topo fica acima delas — senão o ⋮ das
     linhas que passam por baixo pintava por cima do cabeçalho. */
  --z-linha-acoes: 1;
  --z-grupo-lista: 2;
  --z-progresso: 15;
  --z-barra-acoes: 25;
  --z-painel-campo: 27;
  --z-cabecalho: 30;
  --z-gaveta: 60;
  --z-dialogo: 70;
  --z-toast: 80;
  --z-dica: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-instantanea: 0ms;
    --duracao-rapida: 0ms;
    --duracao-media: 0ms;
    --duracao-lenta: 0ms;
    --duracao-enfase: 0ms;
    --escala-pressao: 1;
  }
}

/* No celular o menu vira gaveta: o topo fixo é só o cabeçalho (âncoras, sticky e
   scroll-padding usam este token). */
@media (max-width: 767.98px) {
  :root {
    --altura-topo: var(--altura-cabecalho);
  }
}