/* Espelha as variáveis do Figma (Brand → Semantica → Contextual → Responsiva). SPEC §3. */
:root {
  /* Brand — escalas */
  --terracota-100:#F0D8CF; --terracota-200:#E1B09F; --terracota-300:#D3896F;
  --terracota-400:#C4623F; --terracota-450:#AD4A2A; --terracota-500:#934A2F;
  --terracota-600:#623120; --terracota-700:#311910;
  --abissal-100:#C6C9CC; --abissal-200:#8D9298; --abissal-300:#545C65;
  --abissal-400:#1B2632; --abissal-500:#141D26; --abissal-600:#0E1319; --abissal-700:#080B0F;
  --marfim-400:#F5F4ED; --marfim-450:#EBE9DF; --marfim-500:#DCDCD5; --marfim-600:#C4C3BE;

  /* Semantica */
  --primaria:var(--terracota-400);       /* só texto grande (≥24px) e decorativo */
  --primaria-450:var(--terracota-450);   /* texto pequeno, bordas, botões */
  --secundaria:var(--abissal-400);
  --secundaria-100:var(--abissal-100); --secundaria-200:var(--abissal-200); --secundaria-300:var(--abissal-300);
  --base:var(--marfim-400);
  --base-450:var(--marfim-450); --base-500:var(--marfim-500); --base-600:var(--marfim-600);

  /* Contextual */
  --text-heading:var(--primaria);       /* acento no título do hero */
  --text-body:var(--secundaria);
  --text-action:var(--primaria-450);
  --surface-background:var(--base);
  --surface-section:var(--base-450);
  --surface-card:var(--base-500);
  --border-primaria:var(--secundaria-200);

  /* Bordas e espaço */
  --border-sm:1px; --border-md:2px; --border-lg:4px;
  --space-100:4px; --space-200:8px; --space-300:12px; --space-400:16px; --space-600:24px;

  /* Tipografia */
  --font-heading:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Merriweather", Georgia, "Times New Roman", serif;

  /* Grade e menu (base = <768) */
  --container:1280px;
  --margin:24px; --gutter:24px; --menu-h:72px;

  /* Tipo por degrau (base = <768) */
  --title-size:36px;  --title-lh:36px;  --hero-title-lh:36px;
  --statement-size:20px; --statement-lh:30px;
}
@media (min-width:900px)  { :root { --margin:60px; --gutter:32px; --menu-h:113px;
  --title-size:40px; --title-lh:40px; --hero-title-lh:40px; --statement-size:24px; --statement-lh:36px; } }
@media (min-width:1024px) { :root { --title-size:48px; --title-lh:52px; --hero-title-lh:48px; } }
@media (min-width:1280px) { :root { --title-size:56px; --title-lh:52px; --hero-title-lh:52px; } }