/* ============================================================
   Hortus · tokens
   ------------------------------------------------------------
   Estrutura, nomes e valores não-cromáticos vêm de
   hortus-l-dico-design-system/project/tokens/*.css — os nomes das
   variáveis foram mantidos idênticos aos do design system pra que dê
   pra ressincronizar quando o DS for atualizado.

   As CORES são as da marca Hortus (decisão de ago/2026, depois do
   teste lado a lado contra a paleta original do DS).

   ⚑ ago/2026 — os hex agora saem do VETOR (Logo.svg / Logo.ai), não
   mais de medição a olho na Logo.jpeg. Onde vier marcado "REAL", é o
   valor exato de um elemento do logo. O resto é derivado desses, por
   escurecimento ou tint, e cada derivado carrega o motivo.

   As FONTES são um híbrido (ago/2026): Anton fica só nos displays de
   pôster, porque é ela que carrega a energia do DS; Archivo e Inter
   (as do brandkit) assumem UI e corpo no lugar de Fredoka e Nunito
   Sans. A Fredoka já tinha sido descartada em jul/2026 por ler
   infantil demais pro uso B2B do site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Pacifico&display=swap');

:root{
  /* ---- Neutros quentes ----
     O creme não vem do logo: é canvas do DS, e a marca combina com ele. */
  --paper:#F6F1E4;        /* creme quente, canvas padrão */
  --paper-2:#EDE6D2;      /* creme mais fundo, poços de card */
  --paper-3:#FCFAF3;      /* quase branco, face de card */
  --ink:#1C1C1C;          /* carvão — display e corpo */
  --ink-soft:#4B4A44;     /* corpo secundário */
  --ink-faint:#6E6C63;    /* legendas, meta — escurecido do #85837A do DS:
                             aquele dava 3,4:1 sobre o creme e é usado em
                             texto corrido de 13-14px (blurb de card, coin) */

  /* ---- Verdes escuros — a família do BADGE ----
     A rampa segue chamando "teal" porque é o nome do DS. Nome mantido de
     propósito, pra continuar espelhando o design system. */
  --teal-900:#223A25;     /* campo do footer — rim escurecido 28%, pra que o
                             badge do logo não desapareça dentro do fundo */
  --teal-700:#2F5033;     /* REAL — aro externo do badge. Poço de seção. */
  --teal-500:#3B523F;     /* REAL — campo interno do badge */

  /* ---- Verdes vivos — a família da FOLHA ---- */
  --leaf-600:#2C7916;     /* folha escurecida 36%: é o verde de ação e de
                             marca. O #45BD22 puro dá 2,4:1 no branco e 2,2:1
                             no creme — não serve nem pra botão nem pra link. */
  --leaf-500:#45BD22;     /* REAL — folhas do símbolo */
  --leaf-300:#8FD77A;     /* tint 40% branco da folha */

  /* A rampa "red" do DS carrega a cor de ação. A Hortus não tem vermelho
     próprio: o vermelho existe só no mon Igarashi e não deve espalhar.
     Ação = verde folha. */
  --red-600:#2C7916;      /* ação primária — 5,45:1 com branco */
  --red-500:#256613;      /* hover. Aqui o passo "500" é mais ESCURO de
                             propósito: o .btn já clareia 6% no hover, e
                             clarear duas vezes derrubava o texto branco
                             abaixo de 4,5:1. */
  --red-100:#ECF8E9;      /* poço tingido — tint 90% da folha */

  /* ---- Sol ---- */
  --yellow-500:#F9A31E;   /* REAL — corpo do sol */
  --yellow-400:#FCBF0D;   /* REAL — miolo do sol e aro amarelo do badge */
  --orange-500:#D68C1A;   /* sol escurecido 14% — âmbar queimado */

  /* ---- Endosso Igarashi ----
     Cores do mon, exatas do vetor. Só aparecem no endosso; não espalham
     pro resto do site (a Hortus não tem vermelho na paleta). */
  --igarashi-red:#A52429;   /* REAL — disco do mon */
  --igarashi-gold:#DDAD4B;  /* REAL — aro do mon */

  /* ---- Cores de embalagem ----
     Não são paleta de marca: são as cores dos pacotes, e servem só de
     legenda de sabor/linha na página de Produtos. */
  --pack-original:#1E64C8;   /* Chips Original */
  --pack-churrasco:#B01A22;  /* Chips Churrasco */
  --pack-palito:#E8A21B;     /* Palito Tradicional */

  --white:#FFFFFF;
  --black:#000000;

  /* ---- Semantic aliases ---- */
  --bg-app:var(--paper);
  --bg-well:var(--paper-2);
  --surface-card:var(--paper-3);
  --surface-inverse:var(--teal-700);
  --surface-inverse-deep:var(--teal-900);
  --surface-warm:#4A3324;          /* painel editorial — terra. Não sai do
                                      logo (a marca não tem marrom): é neutro
                                      de apoio, herdado do DS. */

  --text-body:var(--ink-soft);
  --text-strong:var(--ink);
  --text-muted:var(--ink-faint);
  --text-on-inverse:var(--paper);
  --text-on-red:var(--white);
  --text-on-action:var(--white);   /* texto sobre o botão de ação */
  --text-on-sun:var(--ink);        /* texto sobre o amarelo/âmbar */

  --brand:var(--leaf-600);
  --brand-bright:var(--leaf-500);
  --brand-deep:var(--teal-700);
  --action:var(--red-600);
  --action-hover:var(--red-500);
  --accent-sun:var(--yellow-500);
  --accent-sun-soft:var(--yellow-400);
  --accent-orange:var(--orange-500);

  /* Pares tom/texto usados por stickers, tags e coins.
     Ficam em par pra que trocar a paleta não quebre o contraste. */
  --tone-sun-bg:var(--yellow-500);    --tone-sun-fg:var(--ink);
  --tone-action-bg:var(--red-600);    --tone-action-fg:var(--white);
  --tone-brand-bg:var(--leaf-500);    --tone-brand-fg:#10331C;
  --tone-deep-bg:var(--teal-700);     --tone-deep-fg:var(--paper);

  --border:#E3DBC7;
  --border-ink:var(--ink);

  --link:var(--leaf-600);
  --link-hover:var(--teal-700);   /* era o âmbar: 1,8:1 sobre o creme, ilegível
                                     no estado de hover de link corrido */
  --focus-ring:var(--leaf-600);   /* era o --leaf-500: 2,2:1 sobre o creme */

  /* ---- Tipografia ----
     --font-rounded segue com o nome do DS (lá era a Fredoka); o papel é o
     mesmo — rótulos, botões, nav —, só que agora com a Archivo do brandkit. */
  --font-display:'Anton',sans-serif;                    /* displays de pôster */
  --font-rounded:'Archivo',system-ui,sans-serif;        /* UI: botões, labels, nav */
  --font-body:'Inter',system-ui,sans-serif;             /* corpo */
  --font-script:'Pacifico',cursive;                     /* só stickers */

  --fs-display-1:96px;
  --fs-display-2:72px;
  --fs-display-3:52px;
  --fs-h1:38px;
  --fs-h2:28px;
  --fs-h3:22px;
  --fs-title:18px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:12px;

  --fw-body:400;
  --fw-medium:600;
  --fw-bold:700;
  --fw-black:800;

  --lh-tight:0.94;
  --lh-snug:1.15;
  --lh-body:1.55;

  --ls-display:0.005em;
  --ls-label:0.06em;
  --ls-body:0em;

  /* ---- Espaçamento ---- */
  --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;

  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:36px; --r-pill:999px;

  --container:1200px;
  --gutter:24px;

  /* ---- Efeitos ----
     Sombras tingidas do verde do badge, não de preto puro. */
  --shadow-sm:0 2px 6px rgba(47,80,51,0.10);
  --shadow-md:0 10px 24px rgba(47,80,51,0.13);
  --shadow-lg:0 24px 60px rgba(47,80,51,0.20);
  --shadow-product:0 30px 50px rgba(47,80,51,0.32);

  --shadow-sticker:3px 3px 0 rgba(28,28,28,1);
  --border-sticker:3px solid var(--ink);

  --ease-pop:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:120ms;
  --dur-base:220ms;
  --dur-slow:420ms;
}