/* ===========================================================================
   O CIRCUITO — tokens
   Base: products/avedra/DESIGN.md §2 (cor) e §3 (tipografia).
   EXCEÇÃO DE APLICAÇÃO autorizada pelo Henrique em 12/09 para ESTA página:
   cartão, sombra, raio, acento de cor forte, contraste agressivo de tamanho e
   campo claro. A autorização é de página de venda; não altera a masterbrand.
   ========================================================================= */
:root {

  /* ---- paleta oficial AVEDRA (DESIGN §2.1, hex literal do documento) ---- */
  --av-ink:        #0B0B0A;
  --av-carbon:     #151513;
  --av-bone:       #F4F0E8;
  --av-paper-deep: #E9E3D8;
  --av-stone:      #A8A39A;
  --av-graphite:   #5F5B55;

  /* ---- acento ----------------------------------------------------------
     Âmbar #E8A33D é a barra do visor do personagem: INVARIANTE registrada no
     branding-log de 01/09 ("o único elemento emissivo"). Não é o âmbar de
     sinal #F6A91A recusado como acento da masterbrand em 09/08, e não é o
     coral #D97757 da referência — esse é, com alta probabilidade, a cor de
     marca do fornecedor (modelagem 08 §10.6), e vestir marca de fornecedor
     não é decisão que cabe aqui.
     Contraste medido: 9,13:1 sobre Ink, nos dois sentidos.              */
  --av-ambar:      #E8A33D;
  --av-ambar-alto: #F5BC66;

  /* ---- papéis ---------------------------------------------------------- */
  --bg:        var(--av-ink);
  --bg-2:      var(--av-carbon);
  --fg:        var(--av-bone);
  --fg-2:      var(--av-stone);
  --acento:    var(--av-ambar);

  --bg-claro:  var(--av-bone);
  --fg-claro:  var(--av-ink);
  --fg-2-claro:var(--av-graphite);

  --fio:       rgba(244, 240, 232, .14);   /* DESIGN §5.2: fio de 1px organiza */
  --fio-forte: rgba(244, 240, 232, .34);
  --fio-claro: rgba(11, 11, 10, .16);
  --fio-acento: rgba(232, 163, 61, .42);
  --acento-fraco: rgba(232, 163, 61, .10);

  --foco:      var(--av-ambar-alto);

  /* ---- tipografia (DESIGN §3.1: Figtree conduz; Lora é frase humana) ---- */
  --ff-sistema:   "Figtree", "Figtree Fallback", system-ui, -apple-system, sans-serif;
  --ff-editorial: "Lora", "Lora Fallback", Georgia, serif;

  /* escala com contraste agressivo autorizado: 76px de manchete contra 13px
     de meta é razão 5,8x. A versão reprovada tinha 2,6x e tudo pesava igual. */
  --fs-h1:    clamp(2.5rem,  1.35rem + 4.8vw, 4.75rem);
  --fs-preco: clamp(4rem,    2.15rem + 7.7vw, 7rem);
  --fs-h2:    clamp(1.9rem,  1.28rem + 2.6vw, 2.75rem);
  --fs-h3:    clamp(1.15rem, 1.06rem + 0.38vw, 1.4rem);
  --fs-lead:  clamp(1.15rem, 1.06rem + 0.4vw, 1.375rem);
  --fs-body:  clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --fs-peq:   clamp(0.9375rem, 0.92rem + 0.08vw, 1rem);
  --fs-meta:  clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --fs-num:   clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem);

  /* ---- espaço: base 8, a régua que a modelagem mandou NÃO abandonar ----- */
  --e-1: 8px;  --e-2: 12px; --e-3: 16px; --e-4: 24px;
  --e-5: 32px; --e-6: 48px; --e-7: 72px; --e-8: 128px;

  --maxw:      1180px;   /* objetos  */
  --maxw-ler:  620px;    /* leitura: 55–65 caracteres (DESIGN §3.3) */
  --pad-lado:  20px;

  /* ---- forma: raio e sombra dura, dentro da exceção -------------------- */
  --raio:    4px;
  --raio-g:  10px;
  --sombra:  5px 5px 0 var(--av-ambar);
  --sombra-claro: 8px 8px 0 var(--av-ink);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* DESIGN §7.1 */
}

@media (min-width: 900px) {
  :root { --pad-lado: 40px; }
}