/* =====================================================================
   ULTRAPACK - DESIGN TOKENS (camada canonica, so :root)
   ---------------------------------------------------------------------
   ESTA E A COPIA QUE VAI PARA PRODUCAO. A fonte de verdade continua em
   `_ops/design-system/tokens.css` (que e local e nunca deploya); ao mudar
   um token, mude LA e recopie para ca no mesmo commit.

   Enfileirada site-wide em 2026-08-27 -- passo 1 da convergencia descrita
   no DESIGN-SYSTEM.md secao 5.1. E injetada a mao no `wp_head`
   (functions.php), e nao por `wp_enqueue_style`, pelo mesmo motivo do
   `mobile-fixes.css`: o `style.css` do child esta na fila e mesmo assim
   NAO chega na pagina, entao enfileirar pelo caminho normal aqui e apostar
   numa folha que pode nunca ser servida.

   Incluir este arquivo NAO muda um pixel sozinho: sao so declaracoes de
   custom property, e nenhuma regra existente as consome. O ganho e que
   codigo novo passa a ter `var(--coral)` para herdar em vez de inventar
   mais um hex -- hoje o site tem 6 corais e 5 inks diferentes (secao 5).
   ---------------------------------------------------------------------
   Extraido do codigo em 2026-08-18. Este arquivo tem SO tokens: nenhuma
   regra de componente, pra poder ser incluido em qualquer superficie
   (child theme, plugin, landing, painel da conta) sem vazar estilo.

   FONTE DOS VALORES: o bloco :root que hoje esta INLINE em
   themes/Avada-Child-Theme/planos/view-{pt,es,en}.php (a unica copia que
   de fato chega ao navegador) e em
   _ops/ultrapack-landing/pages/assets/ultrapack-tokens.css (tokens +
   componentes .up-*, usado pelos mockups em pages/*.html).
   Os valores das tres copias foram conferidos token por token em
   2026-08-18: batem. So a formatacao (minificacao) difere.

   ATENCAO: incluir este arquivo NAO muda nada sozinho. As superficies
   legadas (loja/catalogo no Avada, painel da conta) usam valores
   proprios, quase iguais e nao identicos. A tabela de equivalencia e o
   procedimento de convergencia estao em DESIGN-SYSTEM.md, secao 5.
   ===================================================================== */

:root {
  /* ---- Marca: gradiente-assinatura vinho -> ardosia ---- */
  --brand-wine:       #8a4f66;
  --brand-slate:      #4f5a75;
  --brand-wine-deep:  #6f3f54;
  --brand-slate-deep: #3c4459;
  --grad-brand:      linear-gradient(100deg, var(--brand-wine) 0%, var(--brand-slate) 100%);
  --grad-brand-deep: linear-gradient(100deg, var(--brand-wine-deep) 0%, var(--brand-slate-deep) 100%);

  /* ---- Acento coral: energia, CTA de destaque, selo "novo" ---- */
  --coral:      #f2726a;
  --coral-soft: #ff9a8f;
  --coral-tint: #fff1ef;

  /* ---- Acento dourado: promo, plano de topo, Envato ---- */
  --gold:      #f0951f;
  --gold-deep: #e2621f;
  --grad-gold: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);

  /* ---- Neutros (cool slate) ---- */
  --ink:        #1c2030;   /* titulos */
  --ink-2:      #3a4054;   /* subtitulo, strong */
  --body:       #565d70;   /* texto corrido */
  --muted:      #8990a3;   /* legenda, label secundario */
  --line:       #e7e9f1;   /* borda de card, divisor */
  --line-soft:  #f1f2f7;   /* divisor interno de tabela */
  --surface:    #ffffff;   /* card */
  --surface-2:  #f6f7fb;   /* zebra, thead */
  --surface-3:  #eef0f7;   /* trilho de toggle, code inline */
  --bg:         #fbfbfe;   /* fundo da pagina */
  --ink-invert: #ffffff;

  /* ---- Escuro: hero, faixa, rodape ---- */
  --dark:          #191c2b;
  --dark-2:        #21243a;
  --dark-line:     rgba(255,255,255,.10);
  --on-dark:       #eceefb;
  --on-dark-muted: #a4a9c6;

  /* ---- Semanticas ---- */
  --ok:      #24a56b;
  --ok-bg:   #e7f6ee;
  --warn:    #d98a1f;
  --warn-bg: #fdf2df;
  --danger:  #e0484d;
  --info:    var(--brand-slate);

  /* ---- Tipografia ---- */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Fraunces", "Georgia", serif;  /* so na palavra-destaque do titulo */

  /* ---- Escala tipografica (fluida) ---- */
  --fs-display: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-lead:    1.175rem;
  --fs-body:    1rem;
  --fs-sm:      .9rem;
  --fs-xs:      .78rem;

  /* ---- Raio ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- Espacamento (base 4px) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---- Sombra (glow sempre na cor da marca, nunca vermelho) ---- */
  --sh-sm:    0 1px 2px rgba(28,32,48,.06), 0 2px 8px rgba(28,32,48,.05);
  --sh-md:    0 6px 20px -8px rgba(28,32,48,.15);
  --sh-lg:    0 24px 60px -20px rgba(28,32,48,.22);
  --sh-brand: 0 14px 30px -12px rgba(138,79,102,.55);
  --sh-coral: 0 14px 30px -12px rgba(242,114,106,.55);

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter:    24px;
}