/* ============================================================
   TOKENS DA IDENTIDADE VISUAL — holding @cozorio
   ============================================================

   Este e o arquivo SERVIDO em producao (Vercel). As paginas de
   venda linkam ele em vez de repetir um :root proprio cada uma.

   FONTE CANONICA: .claude/skills/agora-design/tokens/
   Pastas que comecam com ponto nao sao servidas pela Vercel, por
   isso existe esta copia. Ao atualizar o design system, replicar
   as mudancas aqui. Ver DESIGN.md na raiz.

   Ultima sincronizacao: 02/08/2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* --- Papel (fundos) — nunca branco puro --- */
  --paper-50:#FBF9F4;
  --paper-100:#F6F2EA;
  --paper-200:#EFE8D9;
  --paper-300:#E4DAC5;
  --paper-line:#DED2B8;

  /* --- Tinta (texto) — nunca preto puro --- */
  --ink-900:#1B1812;
  --ink-700:#3A352B;
  --ink-500:#5C564C;
  --ink-300:#9A9284;

  /* --- O vermelho. Nao existe segunda cor nesta marca --- */
  --red-700:#8C0E02;
  --red-600:#A81100;
  --red-500:#C81400;
  --red-400:#D0140A;
  --red-tint:#F4DEDA;

  --white:#FFFFFF;

  /* --- Semanticos --- */
  --bg-page:var(--paper-100);
  --bg-raised:var(--paper-50);
  --bg-section-alt:var(--paper-200);
  --bg-deep:var(--ink-900);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-muted:var(--ink-300);
  --text-on-deep:var(--paper-100);
  --text-on-deep-soft:var(--paper-300);
  --accent:var(--red-500);
  --accent-hover:var(--red-600);
  --accent-press:var(--red-700);
  --accent-tint:var(--red-tint);
  --border-hairline:var(--paper-line);
  --border-hairline-deep:rgba(246,242,234,0.18);

  /* --- Tipografia: Lora escreve, Source Sans le --- */
  --font-serif:'Lora',Georgia,'Times New Roman',serif;
  --font-sans:'Source Sans 3','Source Sans Pro',Arial,sans-serif;
  --text-display:clamp(2.75rem,5vw,4rem);
  --text-h1:clamp(2.25rem,3.6vw,3rem);
  --text-h2:clamp(1.75rem,2.6vw,2.25rem);
  --text-h3:1.5rem;
  --text-h4:1.25rem;
  --text-body-lg:1.25rem;
  --text-body:1.125rem;
  --text-small:0.9375rem;
  --text-caption:0.8125rem;
  --text-eyebrow:0.8125rem;
  --lh-tight:1.12;
  --lh-heading:1.28;
  --lh-body:1.65;
  --ls-eyebrow:0.14em;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* --- Espaco: base 4px, usada com generosidade --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* --- Forma: canto quase reto. Metafora de pagina impressa --- */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-pill:999px;
  --container-max:1120px;
  --container-narrow:720px;

  /* --- Movimento: so cor e opacidade. Nada saltitante --- */
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --duration-fast:150ms;
  --duration-base:240ms;
}