/* ============================================================
   Loopi — tokens de marca
   Direção: Portal de Retorno · v3 · 2026-08-10
   Fonte da verdade: docs/brand-v3-proposal.md
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/loopi/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/loopi/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- cor: marca ----------
     A paleta descreve recorrência e consumer tech, não dinheiro.
     Contrastes são medidos contra --loopi-cloud (#F7F5EF). */
  --loopi-plum:          #23152E;  /* âncora e texto · 15,81:1 · AAA */
  --loopi-coral:         #FF5A4E;  /* marca e CTA; texto plum sobre coral · 5,60:1 */
  --loopi-lime:          #C7F65B;  /* sinal de retorno; nunca corpo sobre claro */
  --loopi-lime-text:     #3F5C00;  /* texto semântico sobre claro · 7,02:1 · AAA */
  --loopi-cloud:         #F7F5EF;  /* canvas principal */
  --loopi-lilac:         #D9C9FF;  /* superfície secundária */

  /* ---------- aliases legados — remover após migração ---------- */
  --loopi-indigo:        var(--loopi-plum);
  --loopi-indigo-acao:   var(--loopi-coral);
  --loopi-ambar:         var(--loopi-lime);
  --loopi-ambar-texto:   var(--loopi-lime-text);

  /* ---------- neutros ---------- */
  --loopi-papel:         var(--loopi-cloud);
  --loopi-papel-2:       #EEEAF1;  /* cards e faixas */
  --loopi-tinta:         var(--loopi-plum);
  --loopi-cinza:         #6C6273;  /* texto secundário · 5,30:1 · AA */
  --loopi-borda:         #DED7E2;  /* bordas e divisores — nunca texto */

  /* ---------- cor: estado ---------- */
  --loopi-erro:          #C0362B;  /* 5,25:1 · AA */
  --loopi-sucesso:       #1F6B4A;  /* 6,12:1 · AA */
  --loopi-alerta:        #8A5A11;  /* 5,62:1 · AA */

  /* ---------- tipografia ---------- */
  --loopi-font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --loopi-font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* escala de texto — razão 1.25, base 16px */
  --loopi-text-xs:   0.75rem;   /* 12 · rótulos, metadados */
  --loopi-text-sm:   0.875rem;  /* 14 · texto de apoio, tabelas */
  --loopi-text-base: 1rem;      /* 16 · corpo */
  --loopi-text-lg:   1.125rem;  /* 18 · corpo destacado, lead */
  --loopi-text-xl:   1.5rem;    /* 24 · título de card */
  --loopi-text-2xl:  2rem;      /* 32 · título de seção no app */
  --loopi-text-3xl:  2.75rem;   /* 44 · título de seção no site */
  --loopi-text-4xl:  4rem;      /* 64 · hero */

  /* ---------- espaçamento — grade de 4 ---------- */
  --loopi-space-1: 0.25rem;  --loopi-space-2: 0.5rem;
  --loopi-space-3: 0.75rem;  --loopi-space-4: 1rem;
  --loopi-space-6: 1.5rem;   --loopi-space-8: 2rem;
  --loopi-space-12: 3rem;    --loopi-space-16: 4rem;
  --loopi-space-24: 6rem;

  /* ---------- raio e elevação ---------- */
  --loopi-radius-sm: 6px;
  --loopi-radius:    10px;
  --loopi-radius-lg: 16px;
  --loopi-radius-full: 9999px;
  --loopi-shadow: 0 1px 2px rgba(35,21,46,.05), 0 4px 16px rgba(35,21,46,.07);
}

/* ============================================================
   Classes utilitárias de marca
   ============================================================ */

.loopi-display {
  font-family: var(--loopi-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--loopi-plum);
}

.loopi-body {
  font-family: var(--loopi-font-ui);
  font-size: var(--loopi-text-base);
  line-height: 1.6;
  color: var(--loopi-tinta);
}

/* Valores monetários — sempre com numerais tabulares para alinhar em coluna */
.loopi-valor {
  font-family: var(--loopi-font-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ============================================================
   Regras de uso — quebrá-las quebra a marca
   ============================================================

   1. Coral é marca e CTA. Texto sobre coral é sempre plum; Cloud ou
      branco sobre coral reprovam para corpo pequeno.

   2. Lime indica retorno, recorrência ativa ou conclusão da volta.
      Não substitui todos os estados de sucesso e nunca representa dinheiro.

   3. Bricolage é só para display e marketing. Geist permanece em
      corpo, rótulos, botões, tabelas e toda a interface operacional.

   4. No painel do lojista, Plum aparece com parcimônia — a interface
      precisa aceitar a cor da loja por cima (white-label). Coral fica
      restrito a ações e pontos inequívocos de marca.

   5. Nada que o cliente final vê pode carregar a marca Loopi.
      Templates de mensagem, comprovantes e extratos usam a marca
      da loja. Ver bloco 9 do brandbook.

   6. Proporção alvo: 55% Cloud · 25% Plum · 12% Coral ·
      6% Lilac · 2% Lime.
   ============================================================ */