/* ==========================================================================
   Terra Fértil Brasil — Design Tokens
   Fonte única de verdade para cor, tipografia, espaço e movimento.
   Nenhum valor "cru" deve aparecer nos outros arquivos de CSS.
   ========================================================================== */

:root {
  /* --- Cor: verde (confiança, natural) --- */
  --verde-900: #0F2620;
  --verde-800: #17372B;
  --verde-700: #1F4A39;
  --verde-600: #2C6349;
  --verde-500: #3B7A5E;

  /* --- Cor: sálvia (apoio, superfícies frias) --- */
  --salvia-400: #8CA893;
  --salvia-300: #A8BFAE;
  --salvia-100: #DCE6DC;

  /* --- Cor: creme (fundo, papel) --- */
  --creme-50:  #FBF9F4;
  --creme-100: #F4F0E6;
  --creme-200: #E8E1D1;
  --creme-300: #D8CFB9;

  /* --- Cor: ouro (elegância, perfumaria) --- */
  --ouro-700: #85661A; /* texto pequeno sobre fundo claro: contraste >= 4,5:1 */
  --ouro-600: #9C7A22;
  --ouro-500: #B8912F;
  --ouro-400: #CDA847;
  --ouro-200: #E8D9A8;

  /* --- Cor: texto --- */
  --tinta-900: #1E1C19;
  --tinta-700: #3D3931;
  --tinta-500: #6B655A;
  --tinta-300: #9A9488;

  /* --- Cor: estado --- */
  --alerta-500: #B4432E;
  --sucesso-500: #2C6349;

  /* --- Papéis semânticos --- */
  --fundo: var(--creme-50);
  --fundo-elevado: #FFFFFF;
  --fundo-escuro: var(--verde-900);
  --borda: var(--creme-200);
  --borda-forte: var(--creme-300);
  --texto: var(--tinta-900);
  --texto-suave: var(--tinta-500);
  --acento: var(--verde-700);
  --realce: var(--ouro-500);

  /* --- Tipografia --- */
  --fonte-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --texto-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.75rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  --entrelinha-justa: 1.15;
  --entrelinha-base: 1.6;

  /* --- Espaço (escala de 4px) --- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* --- Forma --- */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 18px;
  --raio-pill: 999px;

  /* --- Sombra --- */
  --sombra-sm: 0 1px 2px rgba(30, 28, 25, 0.05);
  --sombra-md: 0 4px 16px -4px rgba(30, 28, 25, 0.10);
  --sombra-lg: 0 18px 44px -18px rgba(15, 38, 32, 0.34);

  /* --- Movimento --- */
  /* As durações são tokens separados porque `transition-delay` só aceita
     um tempo — não dá para reaproveitar a transição completa nela. */
  --duracao-rapida: 140ms;
  --duracao-base: 260ms;
  --duracao-suave: 520ms;

  --transicao-rapida: var(--duracao-rapida) cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-base: var(--duracao-base) cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-suave: var(--duracao-suave) cubic-bezier(0.16, 1, 0.3, 1);

  /* Entrada da página e da grade: curva com desaceleração longa, que "pousa". */
  --duracao-entrada: 900ms;
  --curva-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --atraso-escalonado: 60ms;  /* intervalo entre itens de uma sequência */
  --deslocamento-entrada: 18px;

  /* --- Camadas --- */
  --z-cabecalho: 100;
  --z-flutuante: 150;  /* WhatsApp: acima do conteúdo, abaixo do véu da gaveta */
  --z-veu: 200;
  --z-gaveta: 210;
  --z-aviso: 300;

  /* --- Layout --- */
  --largura-max: 1240px;
  --margem-pagina: clamp(1rem, 4vw, 3rem);
}