/* GERADO a partir de brand/tokens.css — não editar aqui.
   O kit de marca (guia, logos, README) NÃO é publicado: é material interno.
   Só os tokens vão ao ar, porque o site depende deles para renderizar.
   Ao mudar a marca: editar brand/tokens.css e rodar assets/brand/sync_tokens.sh */

:root {
  /* ---- Cores da marca ---- */
  --pm-verde-pix:   #10E29B; /* Ação · confirmação · destaque */
  --pm-verde-fundo: #0BA574; /* Apoio · preenchimento médio */
  --pm-verde-texto: #087351; /* TEXTO e links sobre fundo claro (ver nota) */
  --pm-grafite:     #0C100E; /* Base · texto */
  --pm-grafite-2:   #161C19; /* Painéis · UI escura */
  --pm-nevoa:       #C7D0CC; /* Neutro · divisórias */
  --pm-papel:       #F5F7F5; /* Fundo claro */

  /* NOTA — o verde muda conforme a superfície, e isto NÃO é preciosismo:
     é contraste medido (WCAG AA exige 4.5:1 para texto).

       superfície   |  PREENCHIMENTO      |  TEXTO / LINK
       -------------|---------------------|---------------------------
       Grafite      |  Verde PIX #10E29B  |  Verde PIX  #10E29B  11.3:1
       Papel        |  Verde PIX #10E29B  |  Verde Texto #087351   5.5:1

     O Verde Fundo #0BA574 REPROVA como texto sobre o Papel: dá 2.9:1. Ele
     serve como preenchimento e como hover, nunca como cor de letra no claro.
     O Verde Texto é o mesmo matiz (161°) e a mesma saturação, só mais escuro —
     continua sendo o verde da marca, e passa.

     O valor foi escolhido contra o PIOR fundo claro em uso, não contra o Papel:
     um verde que passa no Papel (4.8:1) pode reprovar sobre a faixa ou sobre a
     própria lavagem verde do badge, que é onde ele mais aparece. #087351 dá no
     mínimo 5.0:1 em todos eles.

     Sobre o VERDE, o texto é sempre Grafite (--pm-on-accent). Nunca branco. */

  /* ---- Papéis semânticos (tema claro) ---- */
  --pm-bg:          var(--pm-papel);
  --pm-surface:     #FFFFFF;
  --pm-text:        var(--pm-grafite);
  --pm-text-muted:  #55605B;
  --pm-border:      var(--pm-nevoa);
  --pm-accent:      var(--pm-verde-texto);  /* papel de TEXTO/link — por isso o verde escuro */
  --pm-accent-strong: var(--pm-verde-pix);  /* papel de PREENCHIMENTO (botão) */
  --pm-on-accent:   var(--pm-grafite); /* texto sobre o verde — nunca branco */

  /* ---- Tipografia ---- */
  --pm-font-display: 'Space Grotesk', system-ui, 'Segoe UI', Arial, sans-serif;
  --pm-font-sans:    'IBM Plex Sans', system-ui, 'Segoe UI', Arial, sans-serif;
  --pm-font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- Escala ---- */
  --pm-radius-sm: 8px;
  --pm-radius:    14px;
  --pm-radius-lg: 22px;   /* raio do ícone de app (22%) */
  --pm-shadow:    0 6px 24px rgba(12,16,14,.10);
}

/* ---- Tema escuro (UI do device / seções escuras) ---- */
:root[data-theme="dark"],
.pm-dark {
  --pm-bg:         var(--pm-grafite);
  --pm-surface:    var(--pm-grafite-2);
  --pm-text:       var(--pm-papel);
  --pm-text-muted: #9AA6A1;
  --pm-border:     #2A322E;
  --pm-accent:     var(--pm-verde-pix);
}

/* ---- Helpers opcionais ---- */
.pm-display { font-family: var(--pm-font-display); font-weight: 600; letter-spacing: -.035em; }
.pm-mono    { font-family: var(--pm-font-mono); }
.pm-price   { font-family: var(--pm-font-display); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Wordmark com split de cor ----
   O nome é composto (Pix + Mate) e o split torna isso legível. NÃO são duas
   cores fixas: "Mate" usa a cor de texto da superfície e "Pix" usa o verde que
   tem contraste ali. Os papéis semânticos acima já resolvem isso sozinhos —
   --pm-text e --pm-accent trocam de valor entre claro e escuro —, então o
   helper não precisa saber em que fundo está.

     sobre claro   → Pix = Verde Texto #087351   Mate = Grafite #0C100E
     sobre escuro  → Pix = Verde PIX   #10E29B   Mate = Papel   #F5F7F5
     sobre o verde → colapsa: o wordmark inteiro em Grafite (verde sobre verde
                     não existe)

   Exige que a superfície escura se declare (`.pm-dark` ou [data-theme=dark]);
   sem isso o --pm-accent resolve para o verde de texto e o "Pix" sai escuro
   demais para um fundo escuro.

   Uso:  <span class="pm-wordmark"><span class="pix">Pix</span><span class="mate">Mate</span></span>

   Reservado para a marca em DESTAQUE (logo grande, hero, assinatura, favicon).
   Em contexto utilitário (menu, rodapé, letra miúda) o wordmark é
   monocromático — split o tempo todo cansa. */
.pm-wordmark      { font-family: var(--pm-font-display); font-weight: 600; letter-spacing: -.035em; }
.pm-wordmark .pix  { color: var(--pm-accent); }
.pm-wordmark .mate { color: var(--pm-text); }

/* Colapso sobre o verde: sem contraste possível, tudo em grafite. */
.pm-on-accent .pm-wordmark .pix,
.pm-on-accent .pm-wordmark .mate { color: var(--pm-on-accent); }