/**
 * Thiago Agro — design tokens
 * Paleta, tipografia, espaçamento e breakpoints. CSS puro, sem dependência.
 * Importado por apps/lp hoje; apps/site e apps/admin importam o mesmo arquivo depois (CLAUDE.md §4.2).
 *
 * Carregamento de fontes (@font-face) NÃO mora aqui de propósito: url() de fonte é
 * relativo à árvore de assets de cada app, e o Next.js (Etapa 2+) vai carregar as
 * mesmas famílias por outro mecanismo (next/font). Ver apps/lp/src/css/fonts.css.
 *
 * Breakpoints ficam comentados abaixo, não como custom property: media query não
 * lê var() nas condições — são só a referência que todo @media do projeto usa.
 *   sm: 480px · md: 768px · lg: 1024px · xl: 1280px
 */

:root {
  /* Cor — CLAUDE.md §8 */
  --color-terra: #4a2c1e;
  --color-lavoura: #33502b;
  --color-palha: #ede1c6;
  --color-off-white: #faf6ee;
  --color-colheita: #c2600c;
  --color-grafite: #2b2622;
  --color-white: #ffffff;
  --color-error: #a3312c; /* erro de formulário — não faz parte da paleta de marca do §8, uso funcional só */

  /* Utilitário derivado — sombra difusa do hero (ver CLAUDE.md §Hero: "difusa e na cor --terra") */
  --shadow-terra: rgba(74, 44, 30, 0.35);

  /* Tipografia — famílias (arquivos em apps/lp/src/css/fonts.css) */
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --weight-display-medium: 500;
  --weight-display-bold: 700;
  --weight-body-regular: 400;
  --weight-body-semibold: 600;

  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Escala tipográfica — tamanhos fixos (texto de UI/corpo, não precisa fluidez) */
  --text-xs: 0.75rem; /* 12px — legenda, erro de formulário */
  --text-sm: 0.875rem; /* 14px — kicker, label */
  --text-base: 1rem; /* 16px — corpo */
  --text-lg: 1.125rem; /* 18px — lead, subheadline */

  /* Escala tipográfica — tamanhos fluidos via clamp() (títulos e números de destaque) */
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* ~22–28px — H3 */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); /* ~28–40px — H2 */
  --text-3xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem); /* ~36–56px — H1 */
  --text-4xl: clamp(2.75rem, 1.9rem + 4vw, 5rem); /* ~44–80px — números grandes de métrica */

  /* Espaçamento — grade de 4px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-9: 6rem; /* 96px */
  --space-10: 8rem; /* 128px */
}