/* easyyloja — tokens de design
 *
 * Extraídos da referência que o Rafael aprovou (2026-09-12). CSS puro de
 * propósito: servem tanto para a landing page quanto para as telas do app,
 * sem prender o projeto a React, Tailwind ou qualquer build.
 *
 * O que veio da referência: paleta, tipografia, raio de borda, sombra do
 * acento e as curvas de animação.
 *
 * O que NÃO veio, e por quê:
 *  - vídeo de fundo em tela cheia: é linguagem de landing page. Num PDV de
 *    balcão, no 4G da loja, custa bateria e banda e atrasa a venda.
 *  - Helvetica Now Display: fonte comercial da Monotype servida por CDN de
 *    terceiro. Em produto pago é risco de licença. Inter cobre título e corpo.
 */

:root {
  /* ---- Cor ---------------------------------------------------------- */
  --cor-texto:        #192837;
  --cor-texto-suave:  rgba(25, 40, 55, 0.8);
  --cor-texto-fraco:  rgba(25, 40, 55, 0.55);
  --cor-linha:        rgba(25, 40, 55, 0.12);
  --cor-acento:       #7342E2;
  --cor-acento-forte: #5b2fc4;
  --cor-superficie:   #F2F2EE;
  --cor-superficie-2: #CFC8C5;
  --cor-fundo:        #FFFFFF;

  /* Estados que a referência não tinha e uma tela de loja precisa:
     estoque baixo, venda concluída, parcela vencida. */
  --cor-ok:      #1B8A5A;
  --cor-atencao: #B8860B;
  --cor-erro:    #C0392B;

  /* ---- Tipografia ---------------------------------------------------- */
  --fonte-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-numero: 'Inter', ui-monospace, monospace; /* preço e código alinhados */

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-forte:   600;
  --peso-titulo:  800;

  /* Escala fluida com razão de ~1,25 entre degraus.
   *
   * A primeira versão tinha 0,8 / 0,875 / 0,9rem na ponta pequena — razões de
   * 1,03 e 1,09, tamanhos indistinguíveis a olho. Numa lista de estoque isso
   * significa nome de produto e metadado parecendo do mesmo tamanho, e o
   * vendedor perdendo tempo para varrer a tela.
   *
   * O piso de --texto-corpo é 1rem por um motivo prático além da hierarquia:
   * campo de formulário abaixo de 16px faz o Safari do iPhone dar zoom a cada
   * toque, e a tela pularia toda vez que o vendedor bipasse uma peça.
   */
  --texto-titulo:   clamp(1.75rem, 5vw, 3rem);      /* 28 – 48 · hero de entrada */
  --texto-destaque: clamp(1.5rem, 4.5vw, 1.875rem); /* 24 – 30 · número que manda no cartão */
  --texto-secao:    clamp(1.25rem, 3vw, 1.5rem);    /* 20 – 24 · título de tela */
  --texto-corpo:    clamp(1rem, 2.5vw, 1.125rem);   /* 16 – 18 */
  --texto-apoio:    0.9375rem;                      /* 15       */
  --texto-miudo:    0.75rem;                        /* 12       */

  --altura-titulo:  1.05;
  --altura-corpo:   1.65;
  --espaco-titulo: -0.01em;

  /* ---- Forma --------------------------------------------------------- */
  --raio-pilula: 50px;
  --raio-cartao: 16px;
  --raio-campo:  12px;

  --sombra-acento: 0 4px 24px rgba(115, 66, 226, 0.28);
  --sombra-cartao: 0 1px 3px rgba(25, 40, 55, 0.08);
  --sombra-sheet: -12px 0 48px rgba(25, 40, 55, 0.18);

  /* ---- Espaçamento --------------------------------------------------- */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --largura-max: 1280px;
  --largura-leitura: 660px;

  /* ---- Movimento ----------------------------------------------------- */
  --curva-entrada: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-saida:   cubic-bezier(0.55, 0, 1, 0.45);
  --tempo-entrada: 0.45s;
  --tempo-saida:   0.35s;
  --tempo-toque:   0.12s;  /* resposta de botão no balcão: curta */
  --passo-stagger: 0.07s;
}

/* Numa tela de venda, animação é atrito. O app usa só o tempo de toque;
   as transições longas ficam para a landing page. */
.app {
  --tempo-entrada: var(--tempo-toque);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tempo-entrada: 0.01s;
    --tempo-saida: 0.01s;
    --passo-stagger: 0s;
  }
}

/* ---- Primitivos ------------------------------------------------------ */

.botao {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-corpo);
  font-weight: var(--peso-forte);
  border: 0;
  border-radius: var(--raio-pilula);
  padding: 14px 24px;
  cursor: pointer;
  transition: transform var(--tempo-toque) var(--curva-entrada),
              filter var(--tempo-toque) var(--curva-entrada);
}

.botao:active { transform: scale(0.96); }

.botao--primario {
  background: var(--cor-acento);
  color: #fff;
  box-shadow: var(--sombra-acento);
}

.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

/* Alvo de toque de 44px: o vendedor usa com pressa, às vezes com a peça na
   outra mão. Botão pequeno no balcão vira venda digitada errada. */
.botao, .campo { min-height: 44px; }

.campo {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-campo);
  padding: 12px 14px;
  width: 100%;
}

.campo:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 1px;
}

.cartao {
  background: var(--cor-fundo);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: var(--gap-5);
}

/* Preço e código de barras alinhados em coluna, sem dançar a cada dígito. */
.numero {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
}