/* Fundamentos: tokens, reset, tipografia e marca DIER.

   Paleta: fundo branco, texto preto, laranja só onde precisa chamar atenção
   (ação principal, item ativo, dado em destaque). Superfícies escuras existem
   em poucos lugares, sempre em preto — nunca cinza-azulado — para funcionarem
   como contraponto e não como um segundo tema. */

:root{
  /* ---- superfícies ---- */
  --fundo:#ffffff;        /* fundo da página */
  --fundo-2:#f7f7f8;      /* faixas sutis, linhas de formulário, hover de tabela */
  --fundo-3:#efeff1;      /* hover mais firme, chips */
  --preto:#0b0b0c;        /* faixas de destaque, toast, rodapé */

  /* ---- texto ---- */
  --ink:#0b0b0c;          /* texto principal */
  --ink-soft:#52545a;     /* apoio, descrições */
  --ink-mute:#83868d;     /* rótulos, unidades, metadados */

  /* ---- laranja ---- */
  --orange:#ec5b13;
  --orange-deep:#c4470b;
  --orange-soft:#fff2ea;  /* fundo de realce */
  --orange-line:#f6c6a6;

  /* ---- linhas ---- */
  --line:#e8e8ea;
  --line-strong:#d4d5da;

  /* ---- estados ---- */
  --ok:#1d7a47;        --ok-bg:#e8f5ec;
  --warn:#9a6508;      --warn-bg:#fdf3e2;
  --bad:#c0362e;       --bad-bg:#fdecea;
  --info:#2f5fa0;      --info-bg:#eaf1fa;

  /* ---- forma ---- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,11,12,.05);
  --shadow:0 1px 2px rgba(11,11,12,.04), 0 6px 18px rgba(11,11,12,.05);
  --shadow-lg:0 24px 60px rgba(11,11,12,.16);
  --ring:0 0 0 3px rgba(236,91,19,.26);

  /* ---- tipografia ---- */
  --f-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ====================================================== tipografia ===
   Uma única face em todo o sistema: Inter.

   É uma sans-serif desenhada para tela — altura de x grande, aberturas
   largas, algarismos que não se confundem (1 / l, 0 / O) — e é hoje o padrão
   de fato em interface web. Vale mais que uma família por papel: aqui o texto
   muda de função pelo peso, pelo corpo e pelo espaçamento, não pelo desenho.

   Um arquivo variável cobre os pesos 100–900 em 47 kB (subconjunto latino),
   servido pelo próprio Worker — nenhuma requisição a CDN de fonte e, portanto,
   nenhum dado do usuário saindo para terceiros.

   Os algarismos são tabulares em todo o sistema (font-variant-numeric no
   body). É o que o monoespaçado fazia antes: sem largura fixa, coluna de
   dinheiro dança. Agora sem precisar trocar de família.

   Licença: SIL Open Font License 1.1 — embutir e redistribuir é permitido. */

@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-ui);
  background:var(--fundo);
  color:var(--ink);
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Marcava o monoespaçado; hoje só reforça o algarismo tabular onde o body não
   alcança — texto dentro de <svg>, conteúdo exportado. */
.mono{font-variant-numeric:tabular-nums}

/* A hierarquia vem do peso e do espaçamento. A Inter pede entrelinha curta e
   tracking negativo em corpo alto: sem isso, título grande parece solto. */
h1,h2{font-weight:700;line-height:1.14;letter-spacing:-.022em}
h3,h4{font-weight:650;line-height:1.25;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
img,svg{max-width:100%}
::selection{background:var(--orange);color:#fff}

/* Foco visível e consistente em tudo que recebe teclado. Vale mais que
   qualquer detalhe estético: sem isso o sistema fica inoperável no teclado. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- marca ----------
   O letreiro e o símbolo são a arte original da identidade (pasta LOGOTIPO do
   pacote da marca), recortados do fundo chapado e redesenhados para herdar a
   cor do contexto. Usamos máscara em vez de <img> justamente por isso: o mesmo
   arquivo fica preto no topo branco e branco no rodapé preto.

   · .brand-logo          letreiro DIER — o padrão da interface
   · .brand-logo.completo letreiro com o "1987" — só onde há altura para ler
   · .brand-simbolo       o monograma isolado */

.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}

.brand-logo,.brand-simbolo{
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
}
.brand-logo{
  height:24px; aspect-ratio:3.442;
  -webkit-mask-image:url('/assets/img/dier-letreiro.svg');
  mask-image:url('/assets/img/dier-letreiro.svg');
}
.brand-logo.completo{
  height:30px; aspect-ratio:3.622;
  -webkit-mask-image:url('/assets/img/dier-logo.svg');
  mask-image:url('/assets/img/dier-logo.svg');
}
.brand-simbolo{
  height:28px; aspect-ratio:.95; color:var(--orange);
  -webkit-mask-image:url('/assets/img/dier-simbolo.svg');
  mask-image:url('/assets/img/dier-simbolo.svg');
}

/* Lido por leitor de tela, invisível na tela. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}