:root {
  --fas-space-base: 8px;
  --fas-space-0-5: 4px;
  --fas-space-1: 8px;
  --fas-space-1-5: 12px;
  --fas-space-2: 16px;
  --fas-space-3: 24px;
  --fas-space-4: 32px;
  --fas-space-5: 40px;
  --fas-space-6: 48px;
  --fas-space-8: 64px;
  --fas-space-10: 80px;
  --fas-space-12: 96px;
  --fas-space-16: 128px;

  --fas-gap: 16px;
  /* Fluidos: mínimo em 375px, máximo a partir de ~1200px, sem breakpoint. */
  --fas-card-padding: clamp(16px, 4vw, 24px);
  --fas-section-padding: clamp(48px, 8vw, 80px);

  /* Shell geometry */
  --fas-shell-max: 1440px;
  --fas-gutter: clamp(24px, 4vw, 48px); /* @kind spacing */
  --fas-gutter-md: 48px;
  --fas-grid-columns: 12; /* @kind other */
  --fas-grid-gap: clamp(24px, 4vw, 48px);
  --fas-measure: 32rem;

  /* Responsivo — breakpoint único em 768; 1180 só decide a coluna comercial.
     Em JS use Breakpoints.use() do bundle; em CSS estes valores são referência
     (custom property não entra em @media). */
  --fas-bp-md: 768px;
  --fas-bp-aside: 1180px;

  /* Área de toque mínima em tela de toque (WCAG 2.5.5 / HIG 44pt) */
  --fas-touch-min: 44px;

  /* Safe-area de aparelho com entalhe / barra de gesto (precisa de viewport-fit=cover) */
  --fas-safe-top: env(safe-area-inset-top, 0px);
  --fas-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fas-safe-left: env(safe-area-inset-left, 0px);
  --fas-safe-right: env(safe-area-inset-right, 0px);

  /* Altura de viewport em mobile: svh para blocos que têm de caber (herói),
     dvh para folha e painel que acompanham a barra do navegador. Nunca 100vh. */
  --fas-vh-full: 100svh; /* @kind other */
  --fas-sheet-max: 85dvh; /* @kind other */
}