/* ══════════════════════════════════════════════════════════════════════════
   Identidade visual RW Full — tokens e tipografia do portal do cliente.

   Regras vêm do Manual de Identidade Visual v1 (jun/2023); o destilado está
   em `docs/marca.md`. Duas que é fácil violar sem ler:

     · Noturno (#0B0430) NÃO pode ser cor principal de nenhum material — é
       substituto do preto EM TEXTO. Fundo grande em Noturno contraria a
       marca, que pede cores leves.
     · Verde Neon só em detalhe e destaque, nunca como cor principal.

   Os arquivos são servidos de `/marca` — montado em `portal/main.py`
   apontando pra `app/static/marca`, a MESMA pasta que o WMS usa. Uma cópia
   só: trocar o logo um dia muda os dois de uma vez.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta oficial (3.1 do manual) */
  --rw-violeta:     #4C33B5;
  --rw-lilas:       #9338FF;
  --rw-pink:        #E148F7;
  --rw-rose:        #FF95CC;
  --rw-verde-neon:  #27F2BD;
  --rw-off-white:   #F9F9F9;
  --rw-noturno:     #0B0430;

  /* Papéis na interface — sempre derivados da paleta, nunca hex solto */
  --rw-primaria:        var(--rw-violeta);
  --rw-primaria-clara:  var(--rw-lilas);
  --rw-texto:           var(--rw-noturno);
  --rw-fundo:           var(--rw-off-white);

  /* O degradê da marca. Em digital o manual PREFERE a variação em degradê
     (3.2), mas ele é forte: usar em superfície pequena — topo do login,
     botão principal, faixa —, nunca como papel de parede. */
  --rw-degrade: linear-gradient(120deg,
                  var(--rw-violeta) 0%,
                  var(--rw-lilas)   35%,
                  var(--rw-pink)    70%,
                  var(--rw-rose)    100%);
}

/* ── Tipografia ────────────────────────────────────────────────────────
   Clash Display SÓ em título/destaque; Plus Jakarta Sans no resto (2.2).
   Só os três pesos que a interface usa — Extralight e Light do kit não
   servem a tela e ficariam de peso morto no carregamento.
   `font-display: swap`: o texto aparece na hora com a fonte de sistema e
   troca quando a da marca chega — em vez de tela em branco no 4G. */
@font-face {
  font-family: 'Clash Display';
  src: url('/marca/fontes/web/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/marca/fontes/web/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/marca/fontes/web/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Fallback com métricas parecidas, pra troca não pular o layout. */
:root {
  --rw-fonte-titulo: 'Clash Display', 'Plus Jakarta Sans', system-ui, sans-serif;
  --rw-fonte-texto:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body { font-family: var(--rw-fonte-texto); color: var(--rw-texto); }

/* Título é papel, não tamanho: quem manda é a hierarquia do manual.
   `.rw-titulo` marca o que é título de verdade — h1..h3 pegam por padrão. */
h1, h2, h3, .rw-titulo {
  font-family: var(--rw-fonte-titulo);
  letter-spacing: -0.01em;
}

/* ── Peças de marca ───────────────────────────────────────────────────── */
.rw-degrade      { background: var(--rw-degrade); }
.rw-degrade-texto {
  background: var(--rw-degrade);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Faixa fina de degradê — assinatura discreta no topo das telas. */
.rw-faixa { height: 4px; background: var(--rw-degrade); }

/* ── Botões ────────────────────────────────────────────────────────────
   Exportar não é a ação principal de nenhuma tela, mas era o botão mais
   pesado delas: cheio, largo e verde (`bg-green-600`, fora da paleta).
   Vira SECUNDÁRIO — contorno, cor da marca — pra hierarquia da tela dizer
   a verdade sobre o que importa ali.

   Classe em vez de utilitários soltos de propósito: o Tailwind compilado
   só inclui o que encontra varrendo os templates, e regra que mora aqui
   não depende dessa varredura. */
.rw-btn-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 600; line-height: 1.25rem;
  color: var(--rw-primaria);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--rw-primaria) 30%, transparent);
  transition: background-color .15s, border-color .15s;
  cursor: pointer;
}
.rw-btn-secundario:hover {
  background: color-mix(in srgb, var(--rw-primaria) 6%, #fff);
  border-color: color-mix(in srgb, var(--rw-primaria) 55%, transparent);
}