/* ============================================================
   NEE.IA — Design Tokens
   Fonte da verdade dos valores de design: cores, tipografia,
   espaçamento e layout. Tudo aqui vira variável CSS (custom
   property) e é reutilizado em base.css e style.css.
   Editar um valor aqui propaga para a página inteira.
   ============================================================ */

:root {
  /* ---------- Paleta (tokens do Figma) ---------- */
  --cor-linho: #faf6f4;     /* fundo claro principal */
  --cor-areia: #f3eeea;     /* superfície / cards (bg/surface) */
  --cor-branco: #ffffff;    /* fundo / cards */
  --cor-terracota: #bf5841; /* destaque, CTAs, ícones */
  --cor-carvao: #221e1d;    /* texto principal / fundos escuros */

  /* ---------- Papéis semânticos (apontam para a paleta) ----------
     Use estes no CSS dos blocos; assim trocar a paleta é trivial. */
  --cor-fundo: var(--cor-linho);
  --cor-superficie: var(--cor-areia);
  --cor-texto: var(--cor-carvao);
  --cor-destaque: var(--cor-terracota);
  --cor-texto-claro: var(--cor-linho);   /* texto sobre fundo escuro */
  --cor-fundo-escuro: var(--cor-carvao); /* seções de fundo escuro */

  /* ---------- Tipografia: famílias ---------- */
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Lora", Georgia, "Times New Roman", serif;

  /* ---------- Tipografia: pesos ---------- */
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* ---------- Tipografia: escala fluida (mobile -> desktop) ----------
     clamp(min, preferido, max): min = valor no mobile, max = valor no
     desktop (tokens do Figma). A parte com vw faz a transição suave
     entre ~360px e ~1280px de largura de viewport. */
  --fonte-h1: clamp(1.75rem, 1.51rem + 1.09vw, 2.375rem);  /* 28 -> 38px */
  --fonte-h2: clamp(1.5rem, 1.40rem + 0.43vw, 1.75rem);    /* 24 -> 28px */
  --fonte-h3: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);  /* 18 -> 20px */
  --fonte-body-lg: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem); /* 15 (mobile) -> 16px (desktop) */
  --fonte-body: 0.9375rem;      /* 15px */
  --fonte-body-sm: 0.8125rem;   /* 13px */

  /* ---------- Tipografia: altura de linha ---------- */
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-corpo: 1.8;     /* body / body-lg / body-strong */
  --lh-corpo-sm: 1.7;  /* body-sm */

  /* ---------- Tipografia: espaçamento entre letras ---------- */
  --ls-h1: -0.02em;    /* ~ -0.76px em 38px */
  --ls-normal: 0;

  /* ---------- Espaçamento (escala base 8px) ---------- */
  --espaco-1: 0.25rem;  /*  4px */
  --espaco-2: 0.5rem;   /*  8px */
  --espaco-3: 0.75rem;  /* 12px */
  --espaco-4: 1rem;     /* 16px */
  --espaco-5: 1.5rem;   /* 24px */
  --espaco-6: 2rem;     /* 32px */
  --espaco-7: 3rem;     /* 48px */
  --espaco-8: 4rem;     /* 64px */
  --espaco-9: 6rem;     /* 96px */

  /* Respiro vertical de seção (fluido) */
  --espaco-secao: clamp(3rem, 2rem + 5vw, 6rem); /* 48 -> 96px */

  /* ---------- Layout ---------- */
  --container: 1140px;          /* largura máx. do conteúdo (ajustável) */
  --container-estreito: 760px;  /* blocos de texto centralizado */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* respiro lateral 16 -> 32px */

  /* ---------- Bordas, raios e sombras ---------- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --borda: 1px solid rgba(34, 30, 29, 0.12);
  --sombra-sm: 0 1px 2px rgba(34, 30, 29, 0.06);
  --sombra: 0 4px 16px rgba(34, 30, 29, 0.08);

  /* ---------- Movimento ---------- */
  --transicao: 200ms ease;
}