/* ============================================================
   Tokens — Teacher Gustavo Belo
   Extraídos do Figma (file i26TB4Jron3AZxluurD9bu, frame 7190:93).
   Não hardcodar nada equivalente fora daqui.
   ============================================================ */

:root {
  /* ---------- Estruturais (Fase 0.5) ---------- */
  --frame-w: 1440px;
  --content-w: 1216px;
  --section-px: clamp(24px, 7.78vw, 112px);
  --content-gap: 48px;

  /* ---------- Cores (Figma variables) ---------- */
  /* Primary — vermelho do brand */
  --primary-dark: #3F1010;
  --primary-pure: #8E2929;
  --primary-lightest: #D46F5F;

  /* Secondary — neutros quentes */
  --secondary-dark: #454044;
  --secondary-medium: #5A5358;
  --secondary-pure: #847C82;
  --secondary-lightest: #D8D4D7;

  /* Grays / utility */
  --gray-10: #0C111D;
  --white: #FFFFFF;
  --bg-page: #FFFFFF;
  --bg-soft: #F7F5F6;
  /* Hero/sections background — cinza claro warm visível no Figma (above the image). */
  --bg-hero: #ECE8EA;

  /* ---------- Tipografia ---------- */
  /* Confirmado via get_design_context do hero (7190:95 + 7190:115). */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  /* Escala — refinada por seção. */
  --fs-h1: 56px;
  --fs-h2: 48px;
  --fs-h3: 28px;
  --fs-eyebrow: 12px;
  --fs-body: 18px;
  --fs-small: 14px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;

  /* ---------- Spacing/Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---------- Misc ---------- */
  --header-h: 100px;
  --header-h-sticky: 72px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---------- Mobile (extensão) ---------- */
  --mobile-frame-w: 375px;
  --mobile-section-px: 16px;
  --mobile-content-w: 343px;
  --mobile-header-h: 88px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
}