/* ==========================================================================
   Happet LP — Design tokens
   Fonte: variáveis do Figma "Visual App Happet" (nó 1644:7021 / frame 1644:7022).
   Valores marcados [Figma] foram lidos do Figma; [derivado] foram inferidos.
   ========================================================================== */

:root {
  /* Cores [Figma] */
  --color-bg-page: #fdfdfd;      /* fundo do frame */
  --color-bg-brand: #e4fb9a;     /* var(--color-bg-brand) */
  --color-bg-surface: #ffffff;   /* var(--color-bg-surface) */
  --color-text-body: #292929;    /* var(--color-text-body) */
  --color-black: #000000;        /* Blacks/Black */
  --color-error: #e43b3b;        /* Accents/Error e Borders/error */

  /* Tipografia [Figma] — família Rethink Sans, pesos 400 e 700 */
  --font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display-5xl: 40px;        /* Display/5xl, lh 1.25 */
  --fs-display-2xl: 28px;        /* Display/2xl, lh 1.25 */
  --fs-label-base: 16px;         /* Label/base, lh 1.5 */
  --fs-title-60: 60px;           /* tagline do hero (sem estilo nomeado no Figma) */
  --fs-title-124: 124px;         /* "Centraliza tudo" (sem estilo nomeado no Figma) */
  --lh-tight: 1.25;
  --lh-label: 1.5;

  /* Espaçamento, tamanhos e raios [Figma] */
  --gap-sm: 8px;
  --padding-button-x: 16px;
  --padding-nav: 8px;
  --padding-pill-x: 12px;
  --size-button-height: 48px;
  --size-icon-md: 24px;
  --border-width-default: 1px;
  --radius-button: 78px;
  --radius-pill: 100px;

  /* Raios e sombras vistos no layout [Figma, derivado do frame] */
  --radius-card-lg: 40px;        /* banner */
  --radius-card-md: 32px;        /* foto, celular */
  --radius-card-sm: 24px;        /* chips, cartão de frase */
  --radius-icon-btn: 8px;        /* botões sociais */
  --shadow-phone: -16px 11px 64px 0 rgba(0, 0, 0, 0.25);

  /* Movimento [derivado — não existe no Figma] */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-reveal: 700ms;

  /* Escala do stage desktop (definida por JS: largura da janela / 1440, máx. 1) */
  --z: 1;
}